Sự kiện trong HTML

blogphp6 thg7 2019
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 đó.


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ẻ )
 
Sự kiệnMiêu tả
onafterprintChạy script sau khi in trang
onbeforeprintChạy script trước khi in trang
onbeforeunloadChạy script trước khi người dùng thoát trang
onerrorChạy script khi xảy ra lỗi
onhashchangeChạy script khi người dùng thay đổi một phần địa chỉ trang (hash)
onloadChạy script sau khi trang được tải xong
onmessageChạy script khi có một message được chuyển tới
onofflineChạy script khi trình duyệt bắt đầu chế độ làm việc Offline
ononlineChạy script khi trình duyệt bắt đầu chế độ làm việc Online
onpagehideChạy script khi người dùng duyệt trang khác
onpageshowChạy script khi người dùng duyệt trang
onpopstateChạy script khi thay đổi lịch sử các trang đã xem
onresizeChạy script khi kích thước trình duyệt thay đổi
onstorageChạy script khi cơ sở dữ liệu của trình duyệt được cập nhật
onunloadChạ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 Miêu tả
onblurKích hoạt ngay khi khi người dùng chuyển con trỏ ra ngoài
onchangeKích hoạt ngay khi giá trị trong thẻ thay đổi
oncontextmenuChạy script khi menu tự tạo được kích hoạt
onfocusKích hoạt ngay khi người dùng chuyển con trỏ vào thẻ
oninputChạy script khi người dùng nhập liệu
oninvalidChạy script khi nội dung không hợp lệ
onresetKích hoạt khi người dùng nhấn vào nút Reset trên form
onsearchKích hoạt khi người dùng nhập liệu trên khung tìm kiếm (dùng cho
)
onselectKích hoạt sau khi người dùng bôi đen nội dung trong thẻ
onsubmitKí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ệnMiêu tả
onkeydownKích hoạt ngay khi người dùng nhấn xuống một nút trên bàn phím
onkeypressKích hoạt khi người dùng nhấn một phím
onkeyupKí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ệnMiêu tả
onclickKích hoạt khi người dùng nhấn chuột vào một thẻ
ondblclickKích hoạt khi người dùng nhấn đúp chuột vào một thẻ
ondragChạy một script khi người dùng kéo một thẻ
ondragendChạy script khi người dùng thả thẻ
ondragenterChạy script khi người dùng kéo nội dung vào một thẻ hợp lệ
ondragleaveChạy script khi người dùng kéo nội dung ra khỏi một thẻ hợp lệ
ondragoverChạy script khi người dùng kéo nội dung trên một thẻ hợp lệ
ondragstartChạy script khi người dùng bắt đầu thao tác kéo
ondropChạy script khi một nội dung được thả vào
onmousedownKích hoạt khi người dùng nhấn chuột xuống thẻ
onmousemoveKích hoạt khi người dùng di chuột trên một thẻ
onmouseoutKích hoạt khi người dùng di chuột ra khỏi thẻ
onmouseoverKích hoạt khi người dùng di chuột trên thẻ
onmouseupKích hoạt khi người dùng thả phím khỏi chuột
onmousewheelSự kiện này đã bị bỏ. Được thay thế bằng sự kiện onwheel
onscrollChạy script khi thanh cuốn trên thẻ được kéo
onwheelKí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ệnMiêu tả
oncopyKích hoạt khi người dùng sao chép nội dung trên thẻ
oncutKích hoạt khi người dùng cắt một nội dung trên thẻ
onpasteKí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 Miêu tả
onabort Chạy script khi việc tải tệp tin bị hủy bỏ
oncanplay 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 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 Chạy script khi thay đổi cue trong thẻ <track>
ondurationchange Chạy script khi thời lượng của tệp tin media thay đổi
onemptied 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 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 Chạy script khi có lỗi xảy ra trong quá trình tải tệp tin
onloadeddata Chạy script khi đã tải xong dữ liệu tệp tin
onloadedmetadata Chạy script khi tải xong thông tin về tệp tin (như độ phân giải, thời lượng)
onloadstart Chạy script ngay khi dữ liệu tệp tin bắt đầu được tải
onpause 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 Chạy script khi tệp tin đã sẵn sàng để chạy
onplaying Chạy script khi tệp tin media bắt đầu chạy
onprogress Chạy script khi trình duyệt đang trong quá trình lấy dữ liệu tệp tin
onratechange 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 Chạy script khi quá trình seeking kết thúc (xem chú giải bên trên)
onseeking Chạy script khi seeking (xem chú giải bên trên)
onstalled 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 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 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 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 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 Miêu tả
onshow Kích hoạt khi thẻ menu (thẻ <menu>) được hiển thị
ontoggle Kích hoạt khi người dùng mở hoặc đóng thẻ <details>

 

Gửi bài viết tới Facebook

Gửi hình ảnh