Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Cách thêm trình xử lý sự kiện cho phần tử trong JavaScript HTML DOM

Để gắn một trình xử lý sự kiện (event handler) cho phần tử, sử dụng phương thức addEventListener(). Đây là cách hiện đại, linh hoạt và khuyến khích thay vì dùng thuộc tính HTML onclick.

Ví dụ minh họa

Nhấn nút để hiển thị ngày giờ hiện tại:

<!DOCTYPE html>
<html>
<body>
  <p>Nhấn nút bên dưới.</p>
  <button id="btnid">Nhấn tôi</button>
  <p id="pid"></p>
  <script>
    document.getElementById("btnid").addEventListener("click", displayEvent);
    function displayEvent() {
      document.getElementById("pid").innerHTML = new Date().toLocaleString();
    }
  </script>
</body>
</html>

Ưu điểm của addEventListener()

  • Cho phép gắn nhiều handler cho cùng một sự kiện trên cùng một phần tử.
  • Hỗ trợ capture phase (tham số thứ 3: true/false).
  • Dễ dàng gỡ bỏ bằng removeEventListener().
  • Tách biệt HTML và JavaScript (clean code).