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 xảy ra khi người dùng hoặc trình duyệt thao túng một trang.
Khi trang tải, nó được gọi là một sự kiện. Khi người dùng nhấp vào một nút, nhấp chuột đó 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 nhà phát triển có thể sử dụng các sự kiện này để thực thi các câu trả lời mã JavaScript, làm cho 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ư mọi loại phản hồi 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 về Tham chiếu 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
Hãy thử ví dụ sau.
Tương tác của JavaScript với HTML được xử lý thông qua các sự kiện xảy ra khi người dùng hoặc trình duyệt thao túng một trang.
Khi trang tải, nó được gọi là một sự kiện. Khi người dùng nhấp vào một nút, nhấp chuột đó 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.
 |
| Khóa học java miễn phí |
Các nhà phát triển có thể sử dụng các sự kiện này để thực thi các câu trả lời mã JavaScript, làm cho 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ư mọi loại phản hồi 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 về Tham chiếu 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
Loại sự kiện onclick
Đây là loại sự kiện thường được sử dụng 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., chống lại loại sự kiện này.Hãy thử ví dụ sau.
Link đăng ký khóa học : Khóa học java miễn phí.
Thí dụ
Ví dụ sau đây cho thấy cách sử dụng onsubmit. Ở đây chúng ta đang gọi 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, 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.
Sự kiện onmouseover kích hoạt khi bạn đưa chuột qua bất kỳ phần tử nào và trình kích hoạt onmouseout khi bạn di chuyển chuột ra khỏi phần tử đó. Hãy thử ví dụ sau.
Các sự kiện HTML 5 chuẩn được liệt kê ở đây để bạn tham khảo. Ở đây kịch bản chỉ ra một chức năng Javascript được thực hiện đối với sự kiện đó.
<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>
Loại sự kiện
onsubmit là một sự kiện xảy ra khi bạn cố gửi biểu mẫu. Bạn có thể đặt xác thực biểu mẫu của mình theo loại sự kiện này.Thí dụ
Ví dụ sau đây cho thấy cách sử dụng onsubmit. Ở đây chúng ta đang gọi 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, 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 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à trình kích hoạt onmouseout 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>
Đầu ra
Sự kiện tiêu chuẩn HTML 5Các sự kiện HTML 5 chuẩn được liệt kê ở đây để bạn tham khảo. Ở đây kịch bản chỉ ra một chức năng Javascript được thực hiện đố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 |
| Onabort | kịch bản | Kích hoạt trên một sự kiện hủy bỏ |
| onafterprint | kịch bản | Kích hoạt sau khi tài liệu được in |
| onbeforeonload | kịch bản | Kích hoạt trước khi tải tài liệu |
| onbeforeprint | kịch bản | Kích hoạt trước khi tài liệu được in |
| onblur | 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 |
| incanplaythrough | 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ại để đệ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 một menu ngữ cảnh được kích hoạt |
| ondblclick | kịch bản | Kích hoạt trên một con chuột nhấp đúp |
| 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 ở phần cuối của thao tác kéo |
| ondragenter | kịch bản | Kích hoạt khi một phần tử đã được kéo đến một 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ột 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 |
| ondrop | kịch bản | Kích hoạt khi phần tử đã kéo đang bị loại bỏ |
| ondurationchange | kịch bản | Kích hoạt khi độ dài của vật liệu thay đổi |
| khinh thườ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. |
| được sửa đổi | kịch bản | Kích hoạt khi phương tiện đã kết thúc |
| onerror | 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 lấy nét |
| onformchange | kịch bản | Kích hoạt khi biểu mẫu thay đổi |
| onforminput | kịch bản | Kích hoạt khi biểu mẫu nhận dữ liệu nhập của người dùng |
| onhaschange | kịch bản | Kích hoạt khi tài liệu đã 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 |
| NULL | 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 nhấn một phím |
| onkeypress | 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 một phím được giải phóng |
| đ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 truyền thông |
| onmessage | kịch bản | Kích hoạt khi thông báo được kích hoạt |
| onmousedown | kịch bản | Kích hoạt khi nhấn một 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 một nút chuột được nhả |
| onmousewheel | kịch bản | Kích hoạt khi bánh xe chuột đang được xoay |
| onoffline | 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 |
| ononline | 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 |
| diễn xuất | kịch bản | Kích hoạt khi dữ liệu phương tiện sẽ bắt đầu phát |
| diễn xuất | 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 |
| onprogress | 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ỷ lệ phát của dữ liệu truyền thông đã thay đổi |
| onreadystatechange | kịch bản | Kích hoạt khi các thay đổi trạng thái sẵn sàng |
| onredo | kịch bản | Kích hoạt khi tài liệu thực hiện một thao tác làm lại |
| onresize | 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 một phần tử đang được cuộn |
| đượ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ử truyền thông không còn đúng và tìm kiếm đã kết thúc |
| onseeking | kịch bản | Kích hoạt khi thuộc tính tìm kiếm của phần tử truyền thông là đúng và tìm kiếm đã bắt đầu |
| onselect | kịch bản | Kích hoạt khi một phần tử được chọn |
| onstalled | kịch bản | Kích hoạt khi có lỗi khi tìm nạp dữ liệu phương tiện |
| onstorage | kịch bản | Kích hoạt khi một tài liệu tải |
| tiện ích | kịch bản | Kích hoạt khi một biểu mẫu được gửi |
| onsuspend | kịch bản | Kích hoạt khi trình duyệt đang tìm nạp dữ liệu đa 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 |
| ontimeupdate | kịch bản | Kích hoạt khi phương tiện thay đổi vị trí phát của nó |
| onundo | kịch bản | Kích hoạt khi một tài liệu thực hiện hoàn tác |
| onunload | 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 khi âm lượng được đặt thành "tắt tiếng" |
| onwaiting | 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 |
Không có nhận xét nào:
Đăng nhận xét