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