Метод addEventListener()
Пример addEventListener()
Добавьте в окно обработчик события клика:
window.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Привет, мир";
}
Попробуйте сами »
Простой синтаксис:
window.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Привет, мир";
});
Попробуйте сами »
Ещё примеры ниже.
Описание addEventListener()
Метод addEventListener() присоединяет обработчик событий к окну.
Методы документа
Методы элементов
Учебники addEventListener()
Синтаксис addEventListener()
window.addEventListener(event, function, Capture)
Параметры addEventListener()
| Параметры | Описание |
|---|---|
| event | Обязательно. Название события. Не используйте параметр "on" префикс. Используйте "click" вместо "onclick". Все события HTML DOM перечислены в: Справочник по объектам событий HTML DOM. |
| function | Обязательно. Функция, запускаемая при возникновении события. Когда происходит событие, объект события передается функции как первый параметр. Тип объекта события зависит от указанного события. Например, "click" событие принадлежит объекту MouseEvent. |
| capture |
Необязательно (по умолчанию = false).true — обработчик выполняется на этапе захвата.false — обработчик выполняется на этапе всплытия.
|
Возвращаемое значение addEventListener()
| НЕТ |
Ещё примеры addEventListener()
В окно можно добавить множество прослушивателей событий:
window.addEventListener("click", myFunction1);
window.addEventListener("click", myFunction2);
Попробуйте сами »
Вы можете добавлять разные типы событий:
window.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
window.addEventListener("mouseout", someOtherFunction);
Попробуйте сами »
При передаче параметров используйте «анонимную функцию»; для вызова функции с параметрами:
window.addEventListener("click", function() {
myFunction(p1, p2);
});
Попробуйте сами »
Изменить цвет фона документа:
window.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
});
Попробуйте сами »
Использование метода removeEventListener():
// Добавляем прослушиватель событий
window.addEventListener("mousemove", myFunction);
// Удаляем прослушиватель событий
window.removeEventListener("mousemove", myFunction);
Попробуйте сами »
Поддержка браузера addEventListener()
addEventListener поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | Да |