19/09/2018, 14:47

Sự kiện trong HTML

HTML 4 đã bổ sung thêm tính năng bắt các sự kiện (event) khi người dùng thao thác trên trình duyệt, VD: chạy một mã JavaScript khi người dùng nhấn vào một thành phần nào đó. Để tìm hiểu thêm về lập trình với các sự kiện, bạn có thể tham khảo phần học JavaScript. Dưới đây là những sự kiện bạn có ...

HTML 4 đã bổ sung thêm tính năng bắt các sự kiện (event) khi người dùng thao thác trên trình duyệt, VD: chạy một mã JavaScript khi người dùng nhấn vào một thành phần nào đó.

Để tìm hiểu thêm về lập trình với các sự kiện, bạn có thể tham khảo phần học JavaScript.

Dưới đây là những sự kiện bạn có thể thêm vào trong các thẻ của HTML và đưa ra hành động tương ứng với các sự kiện đó.

Icon html5 = Thuộc tính sự kiện cho HTML5.

Sự kiện cho cửa sổ trình duyệt

Sự kiện được kích hoạt khi người dung tương tác với cửa sổ trình duyệt (Dùng trong thẻ <body>)

Sự kiện Giá trịMiêu tả
onafterprintIcon html5scriptChạy script sau khi in trang
onbeforeprintIcon html5scriptChạy script trước khi in trang
onbeforeunloadIcon html5scriptChạy script trước khi người dùng thoát trang
onerrorIcon html5scriptChạy script khi xảy ra lỗi
onhashchangeIcon html5scriptChạy script khi người dùng thay đổi một phần địa chỉ trang (hash)
onloadscriptChạy script sau khi trang được tải xong
onmessageIcon html5scriptChạy script khi có một message được chuyển tới
onofflineIcon html5scriptChạy script khi trình duyệt bắt đầu chế độ làm việc Offline
ononlineIcon html5scriptChạy script khi trình duyệt bắt đầu chế độ làm việc Online
onpagehideIcon html5scriptChạy script khi người dùng duyệt trang khác
onpageshowIcon html5scriptChạy script khi người dùng duyệt trang
onpopstateIcon html5scriptChạy script khi thay đổi lịch sử các trang đã xem
onresizeIcon html5scriptChạy script khi kích thước trình duyệt thay đổi
onstorageIcon html5scriptChạy script khi cơ sở dữ liệu của trình duyệt được cập nhật
onunloadscriptChạy script khi người dùng tải trang khác (hoặc đóng cửa sổ trình duyệt)

Sự kiện cho Form

Được kích hoạt khi người dùng thao tác trên một form HTML (những sự kiện này dùng được cho hầu hết các thẻ trong HTML nhưng chủ yếu được dùng trong form):

Sự kiện Giá trịMiêu tả
onblurscriptKích hoạt ngay khi khi người dùng chuyển con trỏ ra ngoài
onchangescriptKích hoạt ngay khi giá trị trong thẻ thay đổi
oncontextmenuIcon html5scriptChạy script khi menu tự tạo được kích hoạt
onfocusscriptKích hoạt ngay khi người dùng chuyển con trỏ vào thẻ
oninputIcon html5scriptChạy script khi người dùng nhập liệu
oninvalidIcon html5scriptChạy script khi nội dung không hợp lệ
onresetIcon html5scriptKích hoạt khi người dùng nhấn vào nút Reset trên form
onsearchscriptKích hoạt khi người dùng nhập liệu trên khung tìm kiếm (dùng cho
<input="search">)
onselectscriptKích hoạt sau khi người dùng bôi đen nội dung trong thẻ
onsubmitscriptKích hoạt khi dữ liệu từ form được gửi đi

Sự kiện khi thao tác với bàn phím

Sự kiệnGiá trịMiêu tả
onkeydownscriptKích hoạt ngay khi người dùng nhấn xuống một nút trên bàn phím
onkeypressscriptKích hoạt khi người dùng nhấn một phím
onkeyupscriptKích hoạt khi người dùng nhấn xong một nút trên bàn phím

Sự kiện khi thao tác với chuột

Sự kiện được kích hoạt khi người dùng sử dụng chuột hoặc dùng thao tác tương tự:

Sự kiện Giá trịMiêu tả
onclickscriptKích hoạt khi người dùng nhấn chuột vào một thẻ
ondblclickscriptKích hoạt khi người dùng nhấn đúp chuột vào một thẻ
ondragIcon html5scriptChạy một script khi người dùng kéo một thẻ
ondragendIcon html5scriptChạy script khi người dùng thả thẻ
ondragenterIcon html5scriptChạy script khi người dùng kéo nội dung vào một thẻ hợp lệ
ondragleaveIcon html5scriptChạy script khi người dùng kéo nội dung ra khỏi một thẻ hợp lệ
ondragoverIcon html5scriptChạy script khi người dùng kéo nội dung trên một thẻ hợp lệ
ondragstartIcon html5scriptChạy script khi người dùng bắt đầu thao tác kéo
ondropIcon html5scriptChạy script khi một nội dung được thả vào
onmousedownscriptKích hoạt khi người dùng nhấn chuột xuống thẻ
onmousemovescriptKích hoạt khi người dùng di chuột trên một thẻ
onmouseoutscriptKích hoạt khi người dùng di chuột ra khỏi thẻ
onmouseoverscriptKích hoạt khi người dùng di chuột trên thẻ
onmouseupscriptKích hoạt khi người dùng thả phím khỏi chuột
onmousewheelscriptSự kiện này đã bị bỏ. Được thay thế bằng sự kiện onwheel
onscrollIcon html5scriptChạy script khi thanh cuốn trên thẻ được kéo
onwheelIcon html5scriptKích hoạt khi cuộn chuột lên hoặc xuống (bằng con lăn trên chuột)

Sự kiện cho Clipboard

Sự kiệnGiá trịMiêu tả
oncopyscriptKích hoạt khi người dùng sao chép nội dung trên thẻ
oncutscriptKích hoạt khi người dùng cắt một nội dung trên thẻ
onpastescriptKích hoạt khi người dùng dán nội dung vào thẻ

Sự kiện cho Media

Sự kiện được sử dụng trên các thẻ về video, ảnh và audio (dùng được trên hầu hết các thẻ của HTML nhưng chủ yếu sử dụng trên các thẻ media như <audio>, <embed>, <img>, <object> và <video>).

Chú giải về “seeking” : Đây là một thuật ngữ để chỉ hành động bạn chuyển tới một giây nào đó trong khi xem video hay nghe nhạc. VD: Bạn đang xem phim ở phút thứ 6 bạn chuyển tới phút thứ 10 để xem => Hành động chuyển tới phút 10 đó là seeking

0