1. Thuộc Tính Sự Kiện Toàn Cục
Các thuộc tính sự kiện toàn cục có thể được thêm vào bất kỳ phần tử HTML nào để kích hoạt hành động khi trang hoặc cửa sổ trình duyệt thay đổi trạng thái.
| Thuộc tính | Mô tả |
|---|---|
onafterprint |
Chạy khi tài liệu đã được in xong. |
onbeforeprint |
Chạy trước khi tài liệu được in. |
onbeforeunload |
Chạy khi trang sắp bị tải lại hoặc đóng. |
onerror |
Chạy khi có lỗi xảy ra. |
onhashchange |
Chạy khi phần neo (hash) của URL thay đổi. |
onload |
Chạy khi trang đã tải xong. |
onmessage |
Chạy khi nhận được thông điệp từ cửa sổ khác. |
onoffline |
Chạy khi trình duyệt chuyển sang chế độ ngoại tuyến. |
ononline |
Chạy khi trình duyệt chuyển sang chế độ trực tuyến. |
onpagehide |
Chạy khi người dùng rời khỏi trang. |
onpageshow |
Chạy khi người dùng quay lại trang. |
onpopstate |
Chạy khi trạng thái lịch sử của cửa sổ thay đổi. |
onresize |
Chạy khi cửa sổ trình duyệt thay đổi kích thước. |
onstorage |
Chạy khi có thay đổi trong Web Storage. |
onunload |
Chạy khi trang bị đóng hoặc tải lại. |
2. Sự Kiện Trong Biểu Mẫu (Form)
Các sự kiện này thường dùng với các input, textarea, select, hoặc nút trong biểu mẫu HTML để theo dõi và xử lý hành động của người dùng.
| Thuộc tính | Mô tả |
|---|---|
onblur |
Chạy khi phần tử mất tiêu điểm. |
onchange |
Chạy khi giá trị của phần tử thay đổi. |
oncontextmenu |
Chạy khi menu ngữ cảnh được kích hoạt. |
onfocus |
Chạy khi phần tử nhận tiêu điểm. |
oninput |
Chạy khi người dùng nhập liệu vào phần tử. |
oninvalid |
Chạy khi phần tử không hợp lệ. |
onreset |
Chạy khi nút reset trong biểu mẫu được nhấn. |
onsearch |
Chạy khi người dùng nhập vào trường tìm kiếm. |
onselect |
Chạy khi người dùng chọn nội dung trong phần tử. |
onsubmit |
Chạy khi biểu mẫu được gửi đi. |
3. Sự Kiện Bàn Phím
Các thuộc tính này theo dõi hành động người dùng với bàn phím, giúp thực hiện thao tác ngay lập tức khi nhấn hoặc thả phím.
| Thuộc tính | Mô tả |
|---|---|
onkeydown |
Chạy khi người dùng nhấn một phím. |
onkeypress |
Chạy khi người dùng nhấn một phím (deprecated). |
onkeyup |
Chạy khi người dùng thả một phím. |
4. Sự Kiện Chuột
Các sự kiện chuột giúp tạo trải nghiệm tương tác như click, kéo, hover.
| Thuộc tính | Mô tả |
|---|---|
onclick |
Chạy khi người dùng nhấp chuột vào phần tử. |
ondblclick |
Chạy khi người dùng nhấp đúp chuột. |
onmousedown |
Chạy khi nhấn nút chuột xuống. |
onmousemove |
Chạy khi con trỏ di chuyển trong phần tử. |
onmouseout |
Chạy khi con trỏ rời khỏi phần tử. |
onmouseover |
Chạy khi con trỏ di chuyển vào phần tử. |
onmouseup |
Chạy khi người dùng thả nút chuột. |
onmousewheel |
Chạy khi cuộn chuột (deprecated). |
onwheel |
Chạy khi người dùng cuộn chuột. |
5. Sự Kiện Kéo Thả (Drag & Drop)
Các sự kiện này dùng để xử lý kéo thả phần tử, giúp tạo các trải nghiệm tương tác nâng cao.
| Thuộc tính | Mô tả |
|---|---|
ondrag |
Chạy khi phần tử đang được kéo. |
ondragend |
Chạy khi kết thúc thao tác kéo. |
ondragenter |
Chạy khi phần tử kéo vào vùng hợp lệ. |
ondragleave |
Chạy khi phần tử kéo rời khỏi vùng hợp lệ. |
ondragover |
Chạy khi phần tử kéo đang ở trên vùng hợp lệ. |
ondragstart |
Chạy khi bắt đầu thao tác kéo. |
ondrop |
Chạy khi phần tử được thả vào vùng hợp lệ. |
onscroll |
Chạy khi thanh cuộn của phần tử thay đổi. |
6. Sự Kiện Clipboard
Các thuộc tính này theo dõi sao chép, cắt, dán, rất hữu ích cho việc xử lý nội dung văn bản.
| Thuộc tính | Mô tả |
|---|---|
oncopy |
Chạy khi người dùng sao chép nội dung. |
oncut |
Chạy khi người dùng cắt nội dung. |
onpaste |
Chạy khi người dùng dán nội dung. |
7. Sự Kiện Phương Tiện (Media)
Các sự kiện này dùng với audio, video, giúp quản lý việc phát, tải, và tương tác với phương tiện.
| Thuộc tính | Mô tả |
|---|---|
onabort |
Chạy khi tải phương tiện bị hủy. |
oncanplay |
Chạy khi phương tiện có thể bắt đầu phát. |
oncanplaythrough |
Chạy khi phương tiện có thể phát hết mà không dừng. |
oncuechange |
Chạy khi cue trong <track> thay đổi. |
ondurationchange |
Chạy khi độ dài phương tiện thay đổi. |
onemptied |
Chạy khi phương tiện không có dữ liệu. |
onended |
Chạy khi phương tiện kết thúc phát. |
onerror |
Chạy khi có lỗi tải phương tiện. |
onloadeddata |
Chạy khi dữ liệu phương tiện đã tải. |
onloadedmetadata |
Chạy khi siêu dữ liệu phương tiện đã tải. |
onloadstart |
Chạy khi bắt đầu tải phương tiện. |
onpause |
Chạy khi phương tiện tạm dừng. |
onplay |
Chạy khi phương tiện bắt đầu phát. |
onplaying |
Chạy khi phương tiện đang phát. |
onprogress |
Chạy khi trình duyệt đang tải phương tiện. |
onratechange |
Chạy khi tốc độ phát thay đổi. |
onseeked |
Chạy khi tìm kiếm kết thúc. |
onseeking |
Chạy khi đang tìm kiếm. |
onstalled |
Chạy khi trình duyệt không thể tải dữ liệu. |
onsuspend |
Chạy khi tải phương tiện bị tạm dừng. |
ontimeupdate |
Chạy khi vị trí phát thay đổi. |
onvolumechange |
Chạy khi âm lượng thay đổi. |
onwaiting |
Chạy khi phương tiện đang chờ dữ liệu. |
8. Sự Kiện Khác
| Thuộc tính | Mô tả |
|---|---|
ontoggle |
Chạy khi người dùng mở hoặc đóng phần tử <details>. |
Kết Luận
Các thuộc tính sự kiện trong HTML là công cụ quan trọng để xây dựng trang web tương tác và thân thiện người dùng. Việc nắm vững từng loại sự kiện sẽ giúp bạn:
-
Tăng tương tác người dùng với trang web.
-
Nâng cao trải nghiệm người dùng (UX).
-
Hỗ trợ SEO On-page khi tối ưu hành vi tải trang và nội dung động.
Tham khảo thêm:
Phản hồi (0)