Ví dụ và các sử dụng các thuộc tính sự kiện (Event) trong HTML.

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ó 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 🙂

Sự kiện Giá trịMiêu tả
onabortscriptChạy script khi việc tải tệp tin bị hủy bỏ
oncanplayIcon html5scriptChạy script khi tệp tin đã sẵn sàng để chạy (đã tải một phần dữ liệu đủ để chạy)
oncanplaythroughIcon html5scriptChạy script khi tệp tin có thể chạy từ đầu tới cuối mà không phải tạm dừng để tải thêm dữ liệu
oncuechangeIcon html5scriptChạy script khi thay đổi cue trong thẻ <track>
ondurationchangeIcon html5scriptChạy script khi thời lượng của tệp tin media thay đổi
onemptiedIcon html5scriptChạy script khi phát sinh vấn đề nào đó mà đột ngột không thể kết nối tới tệp tin (như bị kết nối)
onendedIcon html5scriptChạy script khi chạy hết tệp tin (rất hữu dụng nếu bạn muốn hiện thông báo "cảm ơn bạn đã lắng nghe" sau khi kết thúc bài hát)
onerrorIcon html5scriptChạy script khi có lỗi xảy ra trong quá trình tải tệp tin
onloadeddataIcon html5scriptChạy script khi đã tải xong dữ liệu tệp tin
onloadedmetadataIcon html5scriptChạy script khi tải xong thông tin về tệp tin (như độ phân giải, thời lượng)
onloadstartIcon html5scriptChạy script ngay khi dữ liệu tệp tin bắt đầu được tải
onpauseIcon html5scriptChạy script khi tạm dừng phát tệp tin (do người dùng hoặc do lập trình)
onplayIcon html5scriptChạy script khi tệp tin đã sẵn sàng để chạy
onplayingIcon html5scriptChạy script khi tệp tin media bắt đầu chạy
onprogressIcon html5scriptChạy script khi trình duyệt đang trong quá trình lấy dữ liệu tệp tin
onratechangeIcon html5scriptChạy script mỗi khi thay đổi tốc độ phát (như khi người dùng chuyển sang chế độ phát nhanh hay phát chậm)
onseekedIcon html5scriptChạy script khi quá trình seeking kết thúc (xem chú giải bên trên)
onseekingIcon html5scriptChạy script khi seeking (xem chú giải bên trên)
onstalledIcon html5scriptChạy script khi trình duyệt không thể lấy dữ liệu từ tệp tin media vì lý do nào đó
onsuspendIcon html5scriptChạy script khi việc lấy dữ liệu từ tệp tin bị dừng trước khi nó được tải xuống đầy đủ vì lý do nào đó
ontimeupdateIcon html5scriptChạy script khi cập nhật thời gian phát hiện tại (thường dùng để hiển thị thời gian phát hiện tại - bao gồm cả thao tác seeking)
onvolumechangeIcon html5scriptChạy script mỗi khi âm lượng thay đổi (bao gồm cả việc chuyển sang chết độ "tắt tiếng")
onwaitingIcon html5scriptChạy script khi tệp tin media bị tạm dừng nhưng có thể phát lại ngay (như khi tạm dừng để tải dữ liệu trước khi phát tiếp)

Sự kiện khác

Sự kiện Giá trịMiêu tả
onshowIcon html5scriptKích hoạt khi thẻ menu (thẻ <menu>) được hiển thị
ontoggleIcon html5scriptKích hoạt khi người dùng mở hoặc đóng thẻ <details>

Leave a Reply

Your email address will not be published. Required fields are marked *

*