Phần tử DOM HTML addEventListener ()
Các ví dụ
Thêm sự kiện nhấp chuột vào phần tử <button>:
element.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Mã nhỏ gọn hơn:
element.addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Hello World";
});
Thêm ví dụ bên dưới.
Định nghĩa và Cách sử dụng
Phương addEventListener()thức đính kèm một trình xử lý sự kiện vào phần tử.
Xem thêm:
Phương thức element.removeEventListener ()
Phương thức document.addEventListener ()
Phương thức document.removeEventListener ()
Hướng dẫn
Cú pháp
element.addEventListener(event, function, useCapture)
Thông số
| Parameter | Description |
| event | Required. The name of the event. Do not use the "on" prefix. Use "click" not "onclick". The Complete List of DOM Events. |
| function | Required. The function to run when the event occurs. |
| useCapture |
Optional (default = false).false - The handler is executed in the bubbling phase.true - The handler is executed in the capturing phase.
|
Giá trị trả lại
| KHÔNG AI |
Các ví dụ khác
Bạn có thể thêm nhiều sự kiện vào cùng một phần tử:
element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);
Bạn có thể thêm các sự kiện khác nhau vào cùng một phần tử:
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);
Để chuyển các giá trị tham số, hãy sử dụng "hàm ẩn danh":
element.addEventListener("click", function() {
myFunction(p1, p2);
});
Thay đổi màu nền của phần tử <button>:
element.addEventListener("click", function() {
this.style.backgroundColor = "red";
});
Sự khác biệt giữa sủi bọt và bắt mồi:
element1.addEventListener("click", myFunction, false);
element2.addEventListener("click", myFunction, true);
Xóa trình xử lý sự kiện:
element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);
Hỗ trợ trình duyệt
element.addEventListener()là một tính năng DOM Mức 2 (2001).
Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |