Sự kiện là gì?
Tương tác của JavaScript với HTML được xử lý thông qua các sự kiện, chúng xảy ra khi người dùng hoặc trình duyệt thao tác trên một trang.
Khi tải trang nó được gọi là một sự kiện. Khi người dùng nhấp vào một nút, lần nhấp đó cũng là một sự kiện. Các ví dụ khác bao gồm các sự kiện như nhấn phím bất kỳ, đóng cửa sổ, thay đổi kích thước cửa sổ, v.v.
Các bạn có thể sử dụng các sự kiện này để thực thi các phản hồi được mã hóa JavaScript, khiến các nút đóng cửa sổ, thông báo được hiển thị cho người dùng, dữ liệu được xác thực và hầu như bất kỳ loại phản hồi nào khác có thể tưởng tượng được.
Sự kiện là một phần của Mô hình Đối tượng Tài liệu (DOM) Cấp 3 và mọi phần tử HTML đều chứa một tập hợp các sự kiện có thể kích hoạt Mã JavaScript.
Vui lòng xem qua hướng dẫn nhỏ này để hiểu rõ hơn Tham khảo sự kiện HTML . Ở đây chúng ta sẽ thấy một vài ví dụ để hiểu mối quan hệ giữa Sự kiện và JavaScript
onclick Loại sự kiện
Đây là loại sự kiện được sử dụng thường xuyên nhất xảy ra khi người dùng nhấp vào nút bên trái của chuột. Bạn có thể đặt xác thực, cảnh báo, v.v. của mình đối với loại sự kiện này.
Ví dụ
Hãy thử ví dụ sau.
<html> <head> <script type = "text/javascript"> <!-- function sayHello() { alert("Hello World") } //--> </script> </head> <body> <p>Click the following button and see result</p> <form> <input type = "button" onclick = "sayHello()" value = "Say Hello" /> </form> </body> </html>
onsubmit Loại sự kiện
onsubmit là sự kiện xảy ra khi bạn cố gắng gửi biểu mẫu. Bạn có thể đặt xác thực biểu mẫu của mình đối với loại sự kiện này.
Ví dụ
Ví dụ sau đây cho thấy cách sử dụng onsubmit. Ở đây chúng tôi đang gọi một hàm validate() trước khi gửi dữ liệu biểu mẫu tới máy chủ web. Nếu hàm validate() trả về true thì biểu mẫu sẽ được gửi, nếu không nó sẽ không gửi dữ liệu.
Hãy thử ví dụ sau.
<html> <head> <script type = "text/javascript"> <!-- function validation() { all validation goes here ......... return either true or false } //--> </script> </head> <body> <form method = "POST" action = "t.cgi" onsubmit = "return validate()"> ....... <input type = "submit" value = "Submit" /> </form> </body> </html>
onmouseover và onmouseout
Hai loại sự kiện này sẽ giúp bạn tạo các hiệu ứng đẹp mắt với hình ảnh hoặc thậm chí với cả văn bản. Sự kiện onmouseover kích hoạt khi bạn đưa chuột qua bất kỳ phần tử nào và onmouseout kích hoạt khi bạn di chuyển chuột ra khỏi phần tử đó. Hãy thử ví dụ sau.
<html> <head> <script type = "text/javascript"> <!-- function over() { document.write ("Mouse Over"); } function out() { document.write ("Mouse Out"); } //--> </script> </head> <body> <p>Bring your mouse inside the division to see the result:</p> <div onmouseover = "over()" onmouseout = "out()"> <h2> This is inside the division </h2> </div> </body> </html>
Sự kiện tiêu chuẩn HTML 5
Các sự kiện HTML 5 tiêu chuẩn được liệt kê ở đây để bạn tham khảo. Tập lệnh ở đây cho biết một chức năng Javascript sẽ được thực thi đối với sự kiện đó.
| Thuộc tính | Giá trị | Sự miêu tả |
|---|---|---|
| ngoại tuyến | kịch bản | Kích hoạt khi tài liệu ngoại tuyến |
| hủy bỏ | kịch bản | Kích hoạt một sự kiện hủy bỏ |
| dấu vết | kịch bản | Kích hoạt sau khi tài liệu được in |
| onb Beforeonload | kịch bản | Kích hoạt trước khi tải tài liệu |
| trên trước khi in | kịch bản | Kích hoạt trước khi tài liệu được in |
| làm mờ | kịch bản | Kích hoạt khi cửa sổ mất tiêu điểm |
| oncanplay | kịch bản | Kích hoạt khi phương tiện có thể bắt đầu phát, nhưng có thể phải dừng để lưu vào bộ đệm |
| oncanplaythrough | kịch bản | Kích hoạt khi phương tiện có thể được phát đến hết mà không dừng để lưu vào bộ đệm |
| trao đổi | kịch bản | Kích hoạt khi một phần tử thay đổi |
| trong một cái nhấp chuột | kịch bản | Kích hoạt khi nhấp chuột |
| oncontextmenu | kịch bản | Kích hoạt khi menu ngữ cảnh được kích hoạt |
| ondblclick | kịch bản | Kích hoạt khi nhấp đúp chuột |
| ondrag | kịch bản | Kích hoạt khi một phần tử được kéo |
| ondragend | kịch bản | Kích hoạt khi kết thúc thao tác kéo |
| người thu tiền | kịch bản | Kích hoạt khi một phần tử đã được kéo đến mục tiêu thả hợp lệ |
| ondragleave | kịch bản | Kích hoạt khi một phần tử đang được kéo qua mục tiêu thả hợp lệ |
| ondragover | kịch bản | Kích hoạt khi bắt đầu thao tác kéo |
| ondragstart | kịch bản | Kích hoạt khi bắt đầu thao tác kéo |
| thả xuống | kịch bản | Kích hoạt khi phần tử được kéo đang bị bỏ |
| ondurationchange | kịch bản | Kích hoạt khi độ dài của phương tiện được thay đổi |
| trống rỗng | kịch bản | Kích hoạt khi một phần tử tài nguyên phương tiện đột nhiên trở nên trống rỗng. |
| kết thúc | kịch bản | Kích hoạt khi phương tiện đã đến cuối |
| lỗi | kịch bản | Kích hoạt khi xảy ra lỗi |
| vào trọng tâm | kịch bản | Kích hoạt khi cửa sổ được tập trung |
| onformchange | kịch bản | Kích hoạt khi một biểu mẫu thay đổi |
| onforminput | kịch bản | Kích hoạt khi một biểu mẫu nhận được đầu vào của người dùng |
| onhaschange | kịch bản | Kích hoạt khi tài liệu có thay đổi |
| oninput | kịch bản | Kích hoạt khi một phần tử nhận được đầu vào của người dùng |
| không hợp lệ | kịch bản | Kích hoạt khi một phần tử không hợp lệ |
| onkeydown | kịch bản | Kích hoạt khi một phím được nhấn |
| nhấn phím | kịch bản | Kích hoạt khi một phím được nhấn và nhả |
| onkeyup | kịch bản | Kích hoạt khi nhả phím |
| đang tải | kịch bản | Kích hoạt khi tải tài liệu |
| onloadeddata | kịch bản | Kích hoạt khi dữ liệu phương tiện được tải |
| onloadedmetadata | kịch bản | Kích hoạt khi thời lượng và dữ liệu phương tiện khác của phần tử phương tiện được tải |
| onloadstart | kịch bản | Kích hoạt khi trình duyệt bắt đầu tải dữ liệu phương tiện |
| tin nhắn | kịch bản | Kích hoạt khi tin nhắn được kích hoạt |
| onmousedown | kịch bản | Kích hoạt khi nhấn nút chuột |
| onmousemove | kịch bản | Kích hoạt khi con trỏ chuột di chuyển |
| onmouseout | kịch bản | Kích hoạt khi con trỏ chuột di chuyển ra khỏi phần tử |
| onmouseover | kịch bản | Kích hoạt khi con trỏ chuột di chuyển qua một phần tử |
| onmouseup | kịch bản | Kích hoạt khi nút chuột được nhả ra |
| con lăn chuột | kịch bản | Kích hoạt khi bánh xe chuột đang được xoay |
| trực tuyến | kịch bản | Kích hoạt khi tài liệu ngoại tuyến |
| onoine | kịch bản | Kích hoạt khi tài liệu trực tuyến |
| trực tuyến | kịch bản | Kích hoạt khi tài liệu trực tuyến |
| onpagehide | kịch bản | Kích hoạt khi cửa sổ bị ẩn |
| onpageshow | kịch bản | Kích hoạt khi cửa sổ hiển thị |
| tạm dừng | kịch bản | Kích hoạt khi dữ liệu phương tiện bị tạm dừng |
| đang chơi | kịch bản | Kích hoạt khi dữ liệu phương tiện bắt đầu phát |
| đang chơi | kịch bản | Kích hoạt khi dữ liệu phương tiện bắt đầu phát |
| onpopstate | kịch bản | Kích hoạt khi lịch sử của cửa sổ thay đổi |
| đang tiến triển | kịch bản | Kích hoạt khi trình duyệt đang tìm nạp dữ liệu phương tiện |
| onratechange | kịch bản | Kích hoạt khi tốc độ phát của dữ liệu đa phương tiện đã thay đổi |
| onreadystatechange | kịch bản | Kích hoạt khi trạng thái sẵn sàng thay đổi |
| làm lại | kịch bản | Kích hoạt khi tài liệu thực hiện làm lại |
| thay đổi kích thước | kịch bản | Kích hoạt khi cửa sổ được thay đổi kích thước |
| đăng ký | kịch bản | Kích hoạt khi thanh cuộn của phần tử đang được cuộn |
| tìm kiếm | kịch bản | Kích hoạt khi thuộc tính tìm kiếm của phần tử phương tiện không còn đúng nữa và quá trình tìm kiếm đã kết thúc |
| tìm kiếm | kịch bản | Kích hoạt khi thuộc tính tìm kiếm của phần tử phương tiện là đúng và quá trình tìm kiếm đã bắt đầu |
| chọn | kịch bản | Kích hoạt khi một phần tử được chọn |
| cài đặt | kịch bản | Kích hoạt khi có lỗi khi tìm nạp dữ liệu phương tiện |
| lưu trữ | kịch bản | Kích hoạt khi tải tài liệu |
| onsubmit | kịch bản | Kích hoạt khi một biểu mẫu được gửi |
| đình chỉ | kịch bản | Kích hoạt khi trình duyệt đang tìm nạp dữ liệu phương tiện, nhưng đã dừng trước khi toàn bộ tệp phương tiện được tìm nạp |
| cập nhật đúng giờ | kịch bản | Kích hoạt khi phương tiện thay đổi vị trí phát của nó |
| hoàn tác | kịch bản | Kích hoạt khi một tài liệu thực hiện hoàn tác |
| đang tải | kịch bản | Kích hoạt khi người dùng rời khỏi tài liệu |
| onvolumechange | kịch bản | Kích hoạt khi phương tiện thay đổi âm lượng, cũng như khi âm lượng được đặt thành “tắt tiếng” |
| đang đợi | kịch bản | Kích hoạt khi phương tiện đã ngừng phát nhưng dự kiến sẽ tiếp tục |
