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