Метод addEventListener()
Пример
Прикрепите событие щелчка к документу. Когда пользователь щелкает в любом месте документа, выводите "Привет Мир" в элементе "p" с id= "demo";:
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Привет Мир";
});
Попробуйте сами »
Еще примеры "Попробуй сам" ниже.
Определение и использование
Метод document.addEventListener() присоединяет к документу обработчик событий.
Совет: Используйте метод document.removeEventListener(), чтобы удалить обработчик событий, который был присоединен с помощью метода addEventListener().
Совет: Используйте метод element.addEventListener() присоединения обработчика событий к указанному элементу.
Поддержка браузера
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает этот метод.
| Метод | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
Примечание: Метод addEventListener() не поддерживается в Internet Explorer 8 и более ранних версиях, а также в Opera 6.0 и более ранних версиях. Однако для этих конкретных версий браузера вы можете использовать метод attachEvent() прикрепления обработчиков событий (см. "Еще примеры" ниже для кроссбраузерного решения).
Синтаксис
document.addEventListener(event, function, useCapture)
Параметр значений
| Параметр | Описание |
|---|---|
| event | Требуемый. Строка, указывающая имя события. Примечание: Не надо использовать префикс "on". Например, используйте "click" вместо "onclick". Список всех событий HTML DOM смотрите в Справочник объекта события HTML DOM. |
| function | Требуемый. Указывает функцию, которая будет выполняться при возникновении события. При возникновении события, объект события передается функции в качестве первого параметра. Тип объекта события зависит от указанного события. Например, событие "click" принадлежит объекту MouseEvent. |
| useCapture |
Необязательный. Логическое значение, указывающее, должно ли событие выполняться в фазе захвата или в фазе барботирования. Возможные значения:
|
Технические детали
| Версия DOM | События DOM Уровень 2 |
|---|---|
| Возвращаемое значение: | Нет возвращаемого значения |
| Список изменений: | Параметр useCapture стал необязательным в Firefox 6 и Opera 11.60 (всегда был необязательным для Chrome, IE и Safari) |
Еще примеры
Пример
Вы также можете обратиться к внешней "именованной" функции:
document.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Привет Мир";
}
Попробуйте сами »
Пример
Вы можете добавить в документ много событий, не перезаписывая существующие события.
В этом примере показано, как добавить в документ два события щелчка:
document.addEventListener("click", myFunction);
document.addEventListener("click", someOtherFunction);
Попробуйте сами »
Пример
В документ можно добавлять события различных типов.
В этом примере показано, как добавить в документ множество событий:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);
Попробуйте сами »
Пример
При передаче значений параметров используйте "анонимную функцию", которая вызывает указанную функцию с параметрами:
document.addEventListener("click", function() {
myFunction(p1, p2);
});
Попробуйте сами »
Пример
Измените цвет фона элемента "body" документа:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
});
Попробуйте сами »
Пример
Использование метода removeEventListener() для удаления обработчика событий, присоединенного с помощью метода addEventListener():
// Прикрепите обработчик событий к документу
document.addEventListener("mousemove", myFunction);
// Удалите обработчик событий из документа
document.removeEventListener("mousemove", myFunction);
Попробуйте сами »
Пример
Для браузеров, которые не поддерживают метод addEventListener(), можно использовать метод attachEvent().
Этот пример демонстрирует кроссбраузерное решение:
if (document.addEventListener) { // Для всех основных браузеров, кроме IE8 и более ранних версий
document.addEventListener("click", myFunction);
} else if (document.attachEvent) { // Для IE 8 и более ранних версий
document.attachEvent("onclick", myFunction);
}
Попробуйте сами »
Связанные страницы
Учебник JavaScript: HTML DOM EventListener
Справочник HTML DOM: element.addEventListener()
