Cách làm việc với phương thức addEventListener() trong JavaScript HTML DOM

Phương thức addEventListener() dùng để gắn một trình xử lý sự kiện vào phần tử DOM. Cú pháp: element.addEventListener(event, function, useCapture).

Ví dụ minh họa

Nhấn đúp vào nút để hiển thị ngày giờ:

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

Tham số useCapture (tùy chọn)

• false (mặc định): Sự kiện xử lý ở bubbling phase (từ phần tử con lên cha).
• true: Sự kiện xử lý ở capturing phase (từ cha xuống con).

Ví dụ: element.addEventListener("click", handler, true) sẽ kích hoạt handler trước các handler bubbling trên cùng phần tử.