×

Event Trong JavaScript Và Cách Thêm Event Listener

Avatar of luongtu
luongtu 0 Views
 

Event Là Gì?

Trong JavaScript, "event" là một hành động hoặc sự kiện xảy ra trong trình duyệt mà bạn có thể bắt và xử lý. Các sự kiện này có thể bao gồm việc người dùng nhấp chuột, di chuyển chuột, nhấn phím, tải trang web, gửi biểu mẫu, và nhiều hơn nữa. JavaScript cung cấp các cơ chế để lắng nghe và phản hồi các sự kiện này thông qua việc sử dụng các event listener.

Cách Thêm Event Listener

Có hai cách chính để thêm event listener vào một phần tử trong DOM: sử dụng thuộc tính HTML và sử dụng JavaScript thông qua các phương thức như addEventListener.

1. Sử Dụng Thuộc Tính HTML

Bạn có thể thêm event listener trực tiếp trong HTML bằng cách sử dụng các thuộc tính sự kiện. Ví dụ:

<!DOCTYPE html>
<html>
<head>
  <title>Event Listener Example</title>
</head>
<body>
  <button onclick="alert('Button clicked!')">Click Me</button>
</body>
</html>

2. Sử Dụng addEventListener Trong JavaScript

Phương thức addEventListener cho phép bạn thêm nhiều event listener vào cùng một phần tử mà không ghi đè lên các event listener khác. Đây là cách tiếp cận linh hoạt và mạnh mẽ hơn.

Cú Pháp

element.addEventListener(event, function, useCapture);
  • element: Phần tử mà bạn muốn thêm event listener.
  • event: Tên của sự kiện (ví dụ: "click", "mouseover", "keydown").
  • function: Hàm sẽ được gọi khi sự kiện xảy ra.
  • useCapture (tùy chọn): Boolean xác định thứ tự bắt sự kiện (bubbling hoặc capturing).

Ví Dụ

Dưới đây là một ví dụ về cách sử dụng addEventListener để thêm event listener cho một nút bấm:

<!DOCTYPE html>
<html>
<head>
  <title>Event Listener Example</title>
</head>
<body>
  <button id="myButton">Click Me</button>
  <script>
    var button = document.getElementById("myButton");
    button.addEventListener("click", function() {
      alert("Button clicked!");
    });
  </script>
</body>
</html>

Một Số Sự Kiện Phổ Biến Trong JavaScript

  • Mouse Events: "click", "dblclick", "mouseover", "mouseout", "mousemove", "mousedown", "mouseup"
  • Keyboard Events: "keydown", "keyup", "keypress"
  • Form Events: "submit", "reset", "change", "input", "focus", "blur"
  • Window Events: "load", "resize", "scroll", "unload"

Tổng Kết

Việc hiểu và sử dụng sự kiện trong JavaScript là một phần quan trọng trong việc tạo ra các trang web động và tương tác. Dưới đây là tóm tắt các cách thêm event listener vào một phần tử:

  1. Sử Dụng Thuộc Tính HTML: Đơn giản nhưng hạn chế vì chỉ thêm được một event listener cho mỗi loại sự kiện.

    <button onclick="alert('Button clicked!')">Click Me</button>

  2. Sử Dụng addEventListener Trong JavaScript: Linh hoạt hơn, cho phép thêm nhiều event listener cho cùng một sự kiện mà không ghi đè lên nhau.

    var button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

Hiểu cách thêm và quản lý các event listener sẽ giúp bạn tạo ra các ứng dụng web mạnh mẽ và thân thiện với người dùng hơn.

Comments

Bài viết liên quan