JavaScript cung cấp 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. Phương thức này gắn sự kiện mà không ghi đè các trình xử lý hiện có. Có thể thêm nhiều trình xử lý sự kiện cho một phần tử cùng lúc.
Phương thức addEventListener() giúp dễ dàng kiểm soát cách sự kiện phản ứng với bubbling (nổi bọt). Có thể áp dụng nhiều sự kiện như mouseover, click, v.v.
Ví dụ
Trong ví dụ sau, sự kiện mouseover được gán. Khi đặt chuột lên nút, văn bản yêu cầu sẽ hiển thị như trong kết quả.
<html> <body> <p>This example uses the addEventListener() method to attach a mouseover event to a button.</p> <input type="button" id="myBtn" value="listener"> <p id="listener"></p> <script> document.getElementById("myBtn").addEventListener("mouseover", displayText); function displayText() { document.getElementById("listener").innerHTML = document.write("Tutorix is the best e-learning platform"); } </script> </body> </html>
Khi thực thi mã, màn hình hiển thị:
Khi mouseover trên nút "listener", kết quả như sau:
Kết quả
