Phương thức HTML DOM addEventListener () được sử dụng để đính kèm một trình xử lý sự kiện vào phần tử được chỉ định.
Sau đây là cú pháp -
element.addEventListener(event, function, capture)
Ở trên, các tham số bao gồm -
- sự kiện: Tên của sự kiện. Bắt buộc.
- chức năng: Hàm chạy khi sự kiện xảy ra. Bắt buộc.
- nắm bắt: Liệu sự kiện có nên được thực thi trong giai đoạn chụp hay không. Điều này sẽ kiểm tra và hiển thị một giá trị boolean; đúng hay sai.
Bây giờ chúng ta hãy xem một ví dụ để triển khai phương thức DOM addEventListener () -
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h2>Demo Heading</h2>
<button id="btn">Click</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 += "Button hovered! "
}
function two() {
document.getElementById("myid").innerHTML += "!!Button Clicked!! "
}
</script>
</body>
</html> Đầu ra
Bây giờ, nếu bạn nhấp vào, thông báo “Đã nhấp vào nút” sẽ được hiển thị. Khi di chuột qua nút, dòng chữ sau sẽ được hiển thị:“Nút được di chuột qua” -