Документ HTML DOM addEventListener()
Примеры
Добавьте событие клика в документ:
document.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Более простой синтаксис:
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
Ниже приведены дополнительные примеры.
Определение и использование
Метод addEventListener()
прикрепляет обработчик событий к документу.
Смотрите также:
Учебное пособие по прослушивателю событий HTML DOM
Метод документа removeEventListener()
Синтаксис
document.addEventListener(event, function, useCapture)
Параметры
Parameter | Description |
event | Required. The event name. Do not use the "on" prefix. For example, use "click" instead of "onclick". HTML DOM events are listed in Complete HTML DOM Event Object Reference. |
function | Required. The function to run when the event occurs. When the event occurs, an event object is passed to the function as the first parameter. The type of the event object depends on the specified event. For example, the "click" event belongs to the MouseEvent object. |
useCapture |
Optional. A boolean. Specifies if the event should be executed in the capturing or in the bubbling phase (default). true - The event handler is executed in the capturing phase.false - The event handler is executed in the bubbling phase.
|
Возвращаемое значение
NONE |
Дополнительные примеры
Вы можете добавить в документ множество обработчиков событий:
document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);
Вы можете добавить различные типы событий:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);
При передаче параметров используйте «анонимную функцию» для вызова функции с параметрами:
document.addEventListener("click", function() {
myFunction(p1, p2);
});
Измените цвет фона документа:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
});
Используя метод removeEventListener():
// Add an event listener
document.addEventListener("mousemove", myFunction);
// Remove event listener
document.removeEventListener("mousemove", myFunction);
Поддержка браузера
document.addEventListener
является функцией DOM уровня 2 (2001 г.).
Он полностью поддерживается во всех браузерах:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |