Giới thiệu
Phương thức addEventListener() gắn một trình xử lý sự kiện (event handler) vào phần tử đã chỉ định. Ưu điểm: có thể gán nhiều handler cho cùng một sự kiện, kiểm soát phase (capturing/bubbling), và dễ dàng gỡ bỏ với removeEventListener().
Cú pháp
element.addEventListener(event, function, capture)
- event: Tên sự kiện (ví dụ: "click", "mouseover"). Bắt buộc.
- function: Hàm callback chạy khi sự kiện xảy ra. Bắt buộc.
- capture (tùy chọn):
true= capturing phase,false(mặc định) = bubbling phase.
Ví dụ minh họa
<!DOCTYPE html>
<html>
<body>
<h2>Tiêu đề Demo</h2>
<button id="btn">Nhấp</button>
<p id="myid"></p>
<script>
var x = document.getElementById("btn");
x.addEventListener("mouseover", one);
x.addEventListener("click", two);
function one() { document.getElementById("myid").innerHTML += "Đã hover nút! "; }
function two() { document.getElementById("myid").innerHTML += "!!Đã click nút!! "; }
</script>
</body>
</html>
Kết quả hiển thị
Di chuột qua nút: hiển thị "Đã hover nút!". Nhấp nút: thêm "!!Đã click nút!!".