JavaScript - Sự kiện
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ác 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, 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 nhà phát triể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 bằng JavaScript, khiến các nút đóng cửa sổ, thông báo 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 về Tham chiếu sự kiện HTML . Ở đây chúng ta sẽ xem một vài ví dụ để hiểu mối quan hệ giữa Event và JavaScript -
Loại sự kiện onclick
Đâ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 trái của chuột. Bạn có thể đặt xác nhận, cảnh báo, v.v. của mình đối với loại sự kiện này.
Thí 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>Đầu ra
gửi kèm loại sự kiện
onsubmitlà một 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 nhận biểu mẫu của mình đối với loại sự kiện này.
Thí dụ
Ví dụ sau đây cho thấy cách sử dụng gửi thư. Ở đây chúng tôi đang gọi mộtvalidate()trước khi gửi dữ liệu biểu mẫu đến máy chủ web. Nếuvalidate() hàm 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 ra những hiệu ứng đẹp mắt với hình ảnh hoặc thậm chí với cả văn bản. Cáconmouseover sự kiện kích hoạt khi bạn đưa chuột qua bất kỳ phần tử nào và onmouseoutkí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>Đầu ra
Sự kiện 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. Ở đây script chỉ ra một hàm 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 |
| Onabort | kịch bản | Kích hoạ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 |
| oncanplaythrough | kịch bản | Kích hoạt khi phương tiện có thể được phát đến cuối mà không dừng lại để lưu vào bộ đệm |
| sự thay đổ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 |
| ondragenter | 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ộ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ử được 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 in được thay đổi |
| có giấy tờ | 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ống rỗng. |
| gắn bó | kịch bản | Kích hoạt khi phương tiện đến cuối |
| 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 được người dùng nhập vào |
| 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ử được người dùng nhập vào |
| oninvalid | 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 |
| onkeypress | kịch bản | Kích hoạt khi nhấn và thả một phím |
| onkeyup | kịch bản | Kích hoạt khi khóa được phát hành |
| đ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 |
| trên tàu | 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 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 một 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 thả nút chuột |
| onmousewheel | kịch bản | Kích hoạt khi con lăn 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 |
| onplay | kịch bản | Kích hoạt khi dữ liệu phương tiện sẽ bắt đầu phát |
| chơi trực tuyến | 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 |
| tiến hành | 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 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 |
| onredo | kịch bản | Kích hoạt khi tài liệu thực hiện làm lại |
| kích thước lớn | kịch bản | Kích hoạt khi cửa sổ được thay đổi kích thước |
| cuộc dạo chơi | kịch bản | Kích hoạt khi thanh cuộn của một phần tử đang được cuộn |
| onseeked | 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 |
| onseeking | 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à việc 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 |
| sự tấn công | kịch bản | Kích hoạt khi tải tài liệu |
| gửi đi | kịch bản | Kích hoạt khi biểu mẫu được gửi |
| phụ thuộc vào | 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 |
| ontimeupdate | kịch bản | Kích hoạt khi phương tiện thay đổi vị trí phát |
| onundo | kịch bản | Kích hoạt khi 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 như khi âm lượng được đặt thành "tắt tiếng" |
| chờ đợ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 |