Các sự kiện HTML là "những thứ" xảy ra với các yếu tố HTML."things" that happen to HTML elements.
Khi JavaScript được sử dụng trong các trang HTML, JavaScript có thể "phản ứng" trên các sự kiện này. "react" on these events.
Sự kiện HTML
Một sự kiện HTML có thể là điều mà trình duyệt thực hiện hoặc một cái gì đó mà người dùng làm.
Dưới đây là một số ví dụ về các sự kiện HTML:
- Một trang web HTML đã tải xong
- Trường đầu vào HTML đã được thay đổi
- Một nút HTML đã được nhấp vào
Thông thường, khi các sự kiện xảy ra, bạn có thể muốn làm điều gì đó.
JavaScript cho phép bạn thực thi mã khi phát hiện các sự kiện.
HTML cho phép các thuộc tính xử lý sự kiện, với mã JavaScript, được thêm vào các phần tử HTML.with JavaScript code, to be added to HTML elements.
Với các trích dẫn đơn:
Với dấu ngoặc kép:
Với dấu ngoặc kép:
Trong ví dụ sau, thuộc tính title (có mã), được thêm vào phần tử <button>:
Thí dụ
Thời gian là?
Hãy tự mình thử »
Trong ví dụ trên, mã JavaScript thay đổi nội dung của phần tử với id = "demo".
Trong ví dụ sau, thuộc tính title (có mã), được thêm vào phần tử <button>:
Thí dụ
Thời gian là?
Hãy tự mình thử »
Trong ví dụ trên, mã JavaScript thay đổi nội dung của phần tử với id = "demo".
Trong ví dụ tiếp theo, mã thay đổi nội dung của phần tử của chính nó (sử dụng this.innerHTML):
Dưới đây là danh sách một số sự kiện HTML phổ biến: | Biến cố |
Sự mô tả | onchange |
Một phần tử HTML đã được thay đổi | trong một cái nhấp chuột |
Người dùng nhấp vào phần tử HTML | onmouseOver |
Người dùng di chuyển chuột qua phần tử HTML | onmouseOut |
Người dùng di chuyển chuột ra khỏi phần tử HTML | Onkeydown |
Người dùng nhấn phím bàn phím
đang tải
Trình duyệt đã hoàn thành tải trang
- Danh sách dài hơn nhiều: W3Schools tham khảo JavaScript HTML DOM.
- Trình xử lý sự kiện JavaScript
- Trình xử lý sự kiện có thể được sử dụng để xử lý và xác minh đầu vào của người dùng, hành động của người dùng và các hành động trình duyệt:
- Những việc nên được thực hiện mỗi khi một trang tải
- Những việc nên được thực hiện khi trang được đóng
Hành động nên được thực hiện khi người dùng nhấp vào nút
- Nội dung cần được xác minh khi người dùng nhập dữ liệu
- Và nhiều hơn nữa ...
- Nhiều phương pháp khác nhau có thể được sử dụng để cho phép JavaScript hoạt động với các sự kiện:
- Thuộc tính sự kiện HTML có thể thực thi mã JavaScript trực tiếp
- Những việc nên được thực hiện khi trang được đóng
Hành động nên được thực hiện khi người dùng nhấp vào nút
Nội dung cần được xác minh khi người dùng nhập dữ liệu
Exercise:
Và nhiều hơn nữa ...
<button ="alert('Hello')">Click me.</button>
Nhiều phương pháp khác nhau có thể được sử dụng để cho phép JavaScript hoạt động với các sự kiện:
Hoạt hình | Các sự kiện liên quan đến API hoạt hình web. Được sử dụng để đáp ứng với các thay đổi về trạng thái hoạt hình (ví dụ: khi hoạt hình bắt đầu hoặc kết thúc). | Các sự kiện hoạt hình được bắn vào Document, Window, HTMLElement. |
Dữ liệu không đồng bộ tìm nạp | Các sự kiện liên quan đến dữ liệu tìm nạp. | Các sự kiện được bắn vào AbortSignal, XMLHttpRequest, title0. |
Bảng tạm | Các sự kiện liên quan đến API clipboard. Được sử dụng để thông báo khi nội dung được cắt, sao chép hoặc dán. | Các sự kiện được bắn vào Document, title2, Window. |
Thành phần | Các sự kiện liên quan đến thành phần; Nhập văn bản "gián tiếp" (thay vì sử dụng nhấn bàn phím bình thường). Ví dụ: văn bản được nhập thông qua bài phát biểu đến công cụ văn bản hoặc sử dụng các kết hợp khóa đặc biệt để sửa đổi bàn phím để biểu diễn các ký tự mới bằng ngôn ngữ khác. | Các sự kiện được bắn vào title2. |
Chuyển đổi CSS | Các sự kiện liên quan đến chuyển đổi CSS. Cung cấp các sự kiện thông báo khi chuyển đổi CSS bắt đầu, dừng lại, bị hủy, v.v. | Các sự kiện được bắn vào Document, HTMLElement, Window. |
Cơ sở dữ liệu | Các sự kiện liên quan đến hoạt động cơ sở dữ liệu: mở, đóng, giao dịch, lỗi, v.v. | Các sự kiện được bắn vào title8, title9, <button>0, <button>1. |
Đột biến dom | Các sự kiện liên quan đến sửa đổi phân cấp và các nút mô hình đối tượng tài liệu (DOM). | CẢNH BÁO: Các sự kiện đột biến không được chấp nhận. Các nhà quan sát đột biến nên được sử dụng thay thế. Mutation Events are deprecated. Mutation Observers should be used instead. |
Kéo'n'drop, bánh xe | Các sự kiện liên quan đến việc sử dụng các sự kiện API kéo và thả API và bánh xe HTML. Các sự kiện kéo và bánh xe có nguồn gốc từ các sự kiện chuột. Mặc dù chúng được bắn khi sử dụng bánh xe chuột hoặc kéo/thả, chúng cũng có thể được sử dụng với phần cứng thích hợp khác. | Kéo các sự kiện được bắn vào Document Các sự kiện bánh xe được bắn vào Document và title2 |
Tiêu điểm | Các sự kiện liên quan đến các yếu tố đạt được và mất tập trung. | Các sự kiện được bắn vào title2, Window. |
Hình thức | Các sự kiện liên quan đến các hình thức được xây dựng, đặt lại và gửi. | Các sự kiện được bắn vào <button>7. |
Toàn màn hình | Các sự kiện liên quan đến API toàn màn hình. Được sử dụng để thông báo khi chuyển đổi giữa các chế độ toàn màn hình và cửa sổ và cả các lỗi xảy ra trong quá trình chuyển đổi này. | Các sự kiện được bắn vào Document, title2. |
Gamepad | Các sự kiện liên quan đến API GamePad. | Các sự kiện được bắn vào Window. |
Cử chỉ | Các sự kiện cảm ứng được khuyến nghị để thực hiện cử chỉ. | Các sự kiện được bắn vào Document, title2. Gamepad
|
Cử chỉ | Các sự kiện cảm ứng được khuyến nghị để thực hiện cử chỉ. | Các sự kiện được bắn vào Window. |
Cử chỉ | Các sự kiện cảm ứng được khuyến nghị để thực hiện cử chỉ. | Ngoài ra, có một số sự kiện cử chỉ không chuẩn: |
Các sự kiện cụ thể của WebKit không chuẩn trên sự kiện title2: this.innerHTML4, sự kiện this.innerHTML5, sự kiện this.innerHTML6. | Các sự kiện cụ thể IE không chuẩn trên title2: this.innerHTML8, this.innerHTML9, <button>0, <button>1, <button>2. | Lịch sử |
Các sự kiện liên quan đến API lịch sử. | Quản lý hiển thị nội dung phần tử HTML Các sự kiện liên quan đến việc thay đổi trạng thái của một phần tử hiển thị hoặc văn bản. | Các sự kiện được bắn vào Document, title2. |
Gamepad | Các sự kiện liên quan đến API GamePad. | Các sự kiện được bắn vào Window. |
Cử chỉ | Các sự kiện cảm ứng được khuyến nghị để thực hiện cử chỉ. | Các sự kiện được bắn vào Window. |
Cử chỉ | Các sự kiện cảm ứng được khuyến nghị để thực hiện cử chỉ. | Các sự kiện được bắn vào Document7, Document8, Document9, Window0, Window1, Window2, Window3, Window4, Window5, Window6, Window7, Window8, phần tử/phần tử, phần tử/video. |
Nhắn tin | Các sự kiện liên quan đến một cửa sổ nhận được một tin nhắn từ bối cảnh duyệt khác. | Các sự kiện được bắn vào Window. |
Con chuột | Các sự kiện liên quan đến việc sử dụng chuột máy tính. Được sử dụng để thông báo khi chuột được nhấp, do đôi, lên và xuống các sự kiện, nhấp chuột phải, chuyển động trong và ra khỏi một yếu tố, lựa chọn văn bản, v.v. Các sự kiện con trỏ cung cấp một sự thay thế bất khả tri về phần cứng cho các sự kiện của chuột. Các sự kiện kéo và bánh xe có nguồn gốc từ các sự kiện chuột. | Các sự kiện chuột bị bắn vào title2 |
Kết nối mạng | Các sự kiện liên quan đến việc đạt được và mất kết nối mạng. | Các sự kiện được bắn vào Window. Con chuột |
Các sự kiện liên quan đến việc sử dụng chuột máy tính. | Được sử dụng để thông báo khi chuột được nhấp, do đôi, lên và xuống các sự kiện, nhấp chuột phải, chuyển động trong và ra khỏi một yếu tố, lựa chọn văn bản, v.v. | Các sự kiện con trỏ cung cấp một sự thay thế bất khả tri về phần cứng cho các sự kiện của chuột. Các sự kiện kéo và bánh xe có nguồn gốc từ các sự kiện chuột. |
Các sự kiện chuột bị bắn vào title2 | Kết nối mạng | Các sự kiện liên quan đến việc đạt được và mất kết nối mạng. |
Các sự kiện được bắn trên HTMLElement2 (API thông tin mạng). | Thanh toán Các sự kiện liên quan đến API yêu cầu thanh toán. | Các sự kiện được bắn vào HTMLElement3, HTMLElement4. |
Màn biểu diễn | Các sự kiện liên quan đến API thời gian phân giải cao, API thời gian hiệu suất, API thời gian điều hướng, API thời gian người dùng và API thời gian tài nguyên. | Các sự kiện được bắn vào Window. |
Con chuột | Các sự kiện liên quan đến việc sử dụng chuột máy tính. | Các sự kiện được bắn vào Window. |
Con chuột | Các sự kiện liên quan đến việc sử dụng chuột máy tính. | Được sử dụng để thông báo khi chuột được nhấp, do đôi, lên và xuống các sự kiện, nhấp chuột phải, chuyển động trong và ra khỏi một yếu tố, lựa chọn văn bản, v.v. |
Các sự kiện con trỏ cung cấp một sự thay thế bất khả tri về phần cứng cho các sự kiện của chuột. Các sự kiện kéo và bánh xe có nguồn gốc từ các sự kiện chuột. | Các sự kiện chuột bị bắn vào title2 | Kết nối mạng |
Các sự kiện liên quan đến việc đạt được và mất kết nối mạng. | Các sự kiện được bắn trên HTMLElement2 (API thông tin mạng). | Thanh toán |
Các sự kiện liên quan đến API yêu cầu thanh toán. | Các sự kiện được bắn vào HTMLElement3, HTMLElement4. Màn biểu diễn | Các sự kiện liên quan đến API thời gian phân giải cao, API thời gian hiệu suất, API thời gian điều hướng, API thời gian người dùng và API thời gian tài nguyên. |
Các sự kiện được bắn vào HTMLElement5. | Con trỏ Các sự kiện liên quan đến API sự kiện con trỏ. The WebVR API (and associated Window events) are deprecated. | Cung cấp thông báo không liên tục phần cứng từ các thiết bị trỏ bao gồm chuột, cảm ứng, bút/bút stylus. |
Các sự kiện được bắn vào Document, HTMLElement. | In | Các sự kiện liên quan đến in ấn. |
Lời hứa từ chối | Các sự kiện được gửi đến bối cảnh tập lệnh toàn cầu khi bất kỳ lời hứa JavaScript nào bị từ chối. | ổ cắm |
Các sự kiện liên quan đến API WebSockets. | Các sự kiện được bắn vào AbortSignal0. | SVG |
Các sự kiện liên quan đến hình ảnh SVG. | Các sự kiện được bắn vào AbortSignal1, AbortSignal2, AbortSignal3. Lựa chọn văn bản | Lựa chọn các sự kiện API liên quan đến việc chọn văn bản. |