Phần tử DOM HTML addEventListener()
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";
}
Hãy tự mình thử »Mã nhỏ gọn hơn:
element.addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Hello World";
});
Hãy tự mình thử »Thêm ví dụ dưới đây.
Sự miêu tả
Phương thức addEventListener()
gắn một trình xử lý sự kiện vào một phần tử.
Phương thức phần tử
Phương thức addEventListener()
Phương thức RemoveEventListener()
Phương pháp tài liệu
Phương thức addEventListener()
Phương thức 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ả về
KHÔNG CÓ |
Thêm ví dụ
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);
Hãy tự mình thử »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);
Hãy tự mình thử »Để truyền các giá trị tham số, hãy sử dụng "hàm ẩn danh":
element.addEventListener("click", function() {
myFunction(p1, p2);
});
Hãy tự mình thử »Thay đổi màu nền của phần tử <button>:
element.addEventListener("click", function() {
this.style.backgroundColor = "red";
});
Hãy tự mình thử »Sự khác biệt giữa sủi bọt và chụp:
element1.addEventListener("click", myFunction, false);
element2.addEventListener("click", myFunction, true);
Hãy tự mình thử »Xóa trình xử lý sự kiện:
element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);
Hãy tự mình thử »Hỗ trợ trình duyệt
element.addEventListener()
là tính năng DOM Cấp 2 (2001).
Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | 9-11 |