Cách thêm nhiều trình xử lý sự kiện cho cùng một phần tử với JavaScript HTML DOM

Để gắn nhiều hơn một trình xử lý sự kiện cho cùng một phần tử, chỉ cần gọi addEventListener() nhiều lần với cùng loại sự kiện hoặc các loại khác nhau. Mỗi lần gọi sẽ thêm một handler mới vào hàng đợi.

Ví dụ minh họa

Nhấn nút một lần để xem ngày giờ, nhấn đúp (double-click) để hiện cảnh báo:

<!DOCTYPE html>
<html>
<body>
  <p>Nhấn nút bên dưới một lần để lấy ngày giờ.</p>
  <p>Nhấn đúp nút bên dưới để hiện hộp cảnh báo.</p>
  <button id="btnid">Nhấn tôi</button>
  <p id="pid"></p>
  <script>
    var btn = document.getElementById("btnid");
    btn.addEventListener("click", displayEvent);
    btn.addEventListener("dblclick", myFunction);
    function displayEvent() {
      document.getElementById("pid").innerHTML = new Date().toLocaleString();
    }
    function myFunction() {
      alert("Bạn đã nhấn đúp nút!");
    }
  </script>
</body>
</html>

Lưu ý quan trọng

• Thứ tự thực thi: Các handler cùng loại sự kiện chạy theo thứ tự đăng ký (FIFO).
• Sử dụng event.stopImmediatePropagation() trong handler để ngăn các handler tiếp theo chạy.
• Không giới hạn số lượng handler cho một sự kiện.