ES6 - Sự kiện

JavaScript có nghĩa là để thêm tính tương tác cho các trang của bạn. JavaScript thực hiện điều này bằng cơ chế sử dụng sự kiện.Events 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.

Sự kiện là một hành động hoặc sự kiện được phần mềm công nhận. Nó có thể được kích hoạt bởi người dùng hoặc hệ thống. Một số ví dụ phổ biến về sự kiện bao gồm người dùng nhấp vào một nút, tải trang web, nhấp vào siêu liên kết, v.v. Sau đây là một số sự kiện HTML phổ biến.

Trình xử lý sự kiện

Khi một sự kiện xảy ra, ứng dụng sẽ thực hiện một tập hợp các tác vụ liên quan. Khối mã đạt được mục đích này được gọi làeventhandler. Mỗi phần tử HTML đều có một tập hợp các sự kiện được liên kết với nó. Chúng tôi có thể xác định cách các sự kiện sẽ được xử lý trong JavaScript bằng cách sử dụng các trình xử lý sự kiện.

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ụ

<html> 
   <head> 
      <script type = "text/javascript">  
         function sayHello() {  
            document.write ("Hello World")  
         }   
      </script> 
   </head> 
   
   <body> 
      <p> Click the following button and see result</p> 
      <input type = "button" onclick = "sayHello()" value = "Say Hello" /> 
   </body> 
</html>

Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

onsubmitEvent Type

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.

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 đến 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.

Thí dụ

<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à onmouseout kích hoạt khi bạn di chuyển chuột ra khỏi phần tử đó.

Thí dụ

<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>

Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

Sự kiện chuẩn HTML 5

Các sự kiện HTML 5 tiêu chuẩn được liệt kê trong bảng sau để bạn tham khảo. Tập lệnh 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ử rời khỏi mục tiêu thả hợp lệ
ondragover 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ệ
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 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 một 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 đã 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
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
sự vi phạm 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