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” -