WebVN Cộng đồng web Việt Nam
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 đó.
= 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ả | |
|---|---|---|---|
| onafterprint | | script | Chạy script sau khi in trang |
| onbeforeprint | | script | Chạy script trước khi in trang |
| onbeforeunload | | script | Chạy script trước khi người dùng thoát trang |
| onerror | | script | Chạy script khi xảy ra lỗi |
| onhashchange | | script | Chạy script khi người dùng thay đổi một phần địa chỉ trang (hash) |
| onload | script | Chạy script sau khi trang được tải xong | |
| onmessage | | script | Chạy script khi có một message được chuyển tới |
| onoffline | | script | Chạy script khi trình duyệt bắt đầu chế độ làm việc Offline |
| ononline | | script | Chạy script khi trình duyệt bắt đầu chế độ làm việc Online |
| onpagehide | | script | Chạy script khi người dùng duyệt trang khác |
| onpageshow | | script | Chạy script khi người dùng duyệt trang |
| onpopstate | | script | Chạy script khi thay đổi lịch sử các trang đã xem |
| onresize | | script | Chạy script khi kích thước trình duyệt thay đổi |
| onstorage | | script | Chạy script khi cơ sở dữ liệu của trình duyệt được cập nhật |
| onunload | script | Chạ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ả | |
|---|---|---|---|
| onblur | script | Kích hoạt ngay khi khi người dùng chuyển con trỏ ra ngoài | |
| onchange | script | Kích hoạt ngay khi giá trị trong thẻ thay đổi | |
| oncontextmenu | | script | Chạy script khi menu tự tạo được kích hoạt |
| onfocus | script | Kích hoạt ngay khi người dùng chuyển con trỏ vào thẻ | |
| oninput | | script | Chạy script khi người dùng nhập liệu |
| oninvalid | | script | Chạy script khi nội dung không hợp lệ |
| onreset | | script | Kích hoạt khi người dùng nhấn vào nút Reset trên form |
| onsearch | script | Kích hoạt khi người dùng nhập liệu trên khung tìm kiếm (dùng cho <input="search">) |
|
| onselect | script | Kích hoạt sau khi người dùng bôi đen nội dung trong thẻ | |
| onsubmit | script | Kí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ện | Giá trị | Miêu tả |
|---|---|---|
| onkeydown | script | Kích hoạt ngay khi người dùng nhấn xuống một nút trên bàn phím |
| onkeypress | script | Kích hoạt khi người dùng nhấn một phím |
| onkeyup | script | Kí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ả | |
|---|---|---|---|
| onclick | script | Kích hoạt khi người dùng nhấn chuột vào một thẻ | |
| ondblclick | script | Kích hoạt khi người dùng nhấn đúp chuột vào một thẻ | |
| ondrag | | script | Chạy một script khi người dùng kéo một thẻ |
| ondragend | | script | Chạy script khi người dùng thả thẻ |
| ondragenter | | script | Chạy script khi người dùng kéo nội dung vào một thẻ hợp lệ |
| ondragleave | | script | Chạy script khi người dùng kéo nội dung ra khỏi một thẻ hợp lệ |
| ondragover | | script | Chạy script khi người dùng kéo nội dung trên một thẻ hợp lệ |
| ondragstart | | script | Chạy script khi người dùng bắt đầu thao tác kéo |
| ondrop | | script | Chạy script khi một nội dung được thả vào |
| onmousedown | script | Kích hoạt khi người dùng nhấn chuột xuống thẻ | |
| onmousemove | script | Kích hoạt khi người dùng di chuột trên một thẻ | |
| onmouseout | script | Kích hoạt khi người dùng di chuột ra khỏi thẻ | |
| onmouseover | script | Kích hoạt khi người dùng di chuột trên thẻ | |
| onmouseup | script | Kích hoạt khi người dùng thả phím khỏi chuột | |
| onmousewheel/td> | script | Sự kiện này đã bị bỏ. Được thay thế bằng sự kiện onwheel | |
| onscroll | | script | Chạy script khi thanh cuốn trên thẻ được kéo |
| onwheel | | script | Kí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ện | Giá trị | Miêu tả |
|---|---|---|
| oncopy | script | Kích hoạt khi người dùng sao chép nội dung trên thẻ |
| oncut | script | Kích hoạt khi người dùng cắt một nội dung trên thẻ |
| onpaste | script | Kí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ả | |
|---|---|---|---|
| onabort | script | Chạy script khi việc tải tệp tin bị hủy bỏ | |
| oncanplay | | script | Chạy script khi tệp tin đã sẵn sàng để chạy (đã tải một phần dữ liệu đủ để chạy) |
| oncanplaythrough | | script | Chạ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 |
| oncuechange | | script | Chạy script khi thay đổi cue trong thẻ <track> |
| ondurationchange | | script | Chạy script khi thời lượng của tệp tin media thay đổi |
| onemptied | | script | Chạ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) |
| onended | | script | Chạ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) |
| onerror | | script | Chạy script khi có lỗi xảy ra trong quá trình tải tệp tin |
| onloadeddata | | script | Chạy script khi đã tải xong dữ liệu tệp tin |
| onloadedmetadata | | script | Chạy script khi tải xong thông tin về tệp tin (như độ phân giải, thời lượng) |
| onloadstart | | script | Chạy script ngay khi dữ liệu tệp tin bắt đầu được tải |
| onpause | | script | Chạy script khi tạm dừng phát tệp tin (do người dùng hoặc do lập trình) |
| onplay | | script | Chạy script khi tệp tin đã sẵn sàng để chạy |
| onplaying | | script | Chạy script khi tệp tin media bắt đầu chạy |
| onprogress | | script | Chạy script khi trình duyệt đang trong quá trình lấy dữ liệu tệp tin |
| onratechange | | script | Chạ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) |
| onseeked | | script | Chạy script khi quá trình seeking kết thúc (xem chú giải bên trên) |
| onseeking | | script | Chạy script khi seeking (xem chú giải bên trên) |
| onstalled | | script | Chạ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 đó |
| onsuspend | | script | Chạ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 đó |
| ontimeupdate | | script | Chạ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) |
| onvolumechange | | script | Chạ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") |
| onwaiting | | script | Chạ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ả | |
|---|---|---|---|
| onshow | | script | Kích hoạt khi thẻ menu (thẻ <menu>) được hiển thị |
| ontoggle | | script | Kích hoạt khi người dùng mở hoặc đóng thẻ <details> |
Bài đăng
0 nhận xét:
Đăng nhận xét