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