Метод addEventListener()
Примеры document.addEventListener()
Добавьте событие click в документ:
document.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Привет, Мир";
}
Попробуйте сами »
Простой синтаксис:
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Привет, Мир";
});
Попробуйте сами »
Ещё примеры ниже.
Описание addEventListener()
Метод addEventListener() присоединяет обработчик событий к документу.
Методы Element addEventListener()
Методы Document addEventListener()
Учебники addEventListener()
Синтаксис addEventListener()
document.addEventListener(event, function, Capture)
Параметры addEventListener()
| Параметр | Описание |
|---|---|
| event | Обязательно. Имя события. Не используйте префикс "on" . Используйте "click" вместо "onclick". Все события HTML DOM перечислены в: Справочник объектов событий HTML DOM. |
| function | Обязательно. Функция, которая будет запущена при возникновении события. Когда происходит событие, объект события передается в функцию в качестве первого параметра. Тип объекта события зависит от указанного события. Например, событие "click" принадлежит объекту MouseEvent. |
| capture |
Optional (default = false).true - Обработчик выполняется на этапе захвата.false - Обработчик выполняется на этапе всплытия.
|
Возвращаемое значение addEventListener()
| НЕТ |
Ещё примеры addEventListener()
Вы можете добавить в document множество прослушивателей событий:
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():
// Добавить прослушиватель событий
document.addEventListener("mousemove", myFunction);
// Удалить прослушиватель событий
document.removeEventListener("mousemove", myFunction);
Попробуйте сами »
Поддержка браузера addEventListener()
document.addEventListener является функцией DOM уровня 2 (2001).
Он полностью поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | 9-11 |