пример
Приложить событие щелчка к документу. Когда пользователь нажимает кнопку в любом месте документа, вывод "Hello World" в <p> элемент с идентификатором = «демо»:
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
}); Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
document. addEventListener() document. addEventListener() метод присоединяет обработчик события к документу.
Совет: Используйте документ. removeEventListener() метод , чтобы удалить обработчик события , который был прикреплен с addEventListener() метод.
Совет: Используйте элемент. addEventListener() метод , чтобы присоединить обработчик события к указанному элементу.
Поддержка браузеров
Числа в таблице указать первую версию браузера, который полностью поддерживает метод.
| метод | |||||
|---|---|---|---|---|---|
| addEventListener() | 1,0 | 9,0 | 1,0 | 1,0 | 7,0 |
Примечание: addEventListener() метод не поддерживается в Internet Explorer 8 и более ранних версий, и Opera 6.0 и более ранних версий. Однако для этих конкретных версий браузеров, вы можете использовать attachEvent() метод для подключения обработчиков событий (see "More Examples" below for a cross-browser solution) .
Синтаксис
document.addEventListener( event , function ,
useCapture )
Значения параметров
| параметр | Описание |
|---|---|
| event | Необходимые. Строка, задающая имя события. Примечание: Не используйте "on" префикс. Например, используйте "click" вместо "onclick" . Список всех событий HTML DOM, смотрите на нашем полный HTML DOM Event Ссылка на объект . |
| function | Необходимые. Задает функцию для запуска при возникновении события. Когда происходит событие, объект события передается в функцию в качестве первого параметра. Тип объекта события зависит от указанного события. Например, "click" событие относится к объекту MouseEvent. |
| useCapture | Необязательный. Логическое значение, указывающее, следует ли событие быть выполнено в захвате или в пузырьковой фазе. Возможные значения:
|
Технические подробности
| DOM Версия: | Уровень DOM 2 События |
|---|---|
| Возвращаемое значение: | Нет возвращаемого значения |
| Changelog: | Параметр useCapture стал необязательным в Firefox 6 и Opera 11.60 (has always been optional for Chrome, IE and Safari) |
Еще примеры
пример
Вы также можете обратиться к внешнему "named" под "named" функции:
document.addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Попробуй сам " пример
Вы можете добавить много событий в документ, без перезаписи существующих событий.
В этом примере показано, как добавить два щелчка события документа:
document.addEventListener("click",
myFunction);
document.addEventListener("click", someOtherFunction); Попробуй сам " пример
Вы можете добавлять события различных типов в документе.
Этот пример показывает, как добавить много событий в документ:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction); Попробуй сам " пример
При передаче значений параметров используйте "anonymous function" , которая вызывает указанную функцию с параметрами:
document.addEventListener("click", function() {
myFunction(p1, p2);
}); Попробуй сам " пример
Изменение цвета фона документа <body> элемента:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
}); Попробуй сам " пример
Использование removeEventListener() метод , чтобы удалить обработчик события , который был прикреплен с addEventListener() метод:
// Attach an event handler to the document
document.addEventListener("mousemove",
myFunction);
// Remove the event handler from the document
document.removeEventListener("mousemove", myFunction); Попробуй сам " пример
Для браузеров , которые не поддерживают addEventListener() метод, вы можете использовать attachEvent() метод.
Этот пример демонстрирует решение кросс-браузер:
if (document.addEventListener) { // For all major browsers, except IE 8 and earlier
document.addEventListener("click", myFunction);
} else if (document.attachEvent) { // For IE 8 and earlier versions
document.attachEvent("onclick", myFunction);
} Попробуй сам " Похожие страницы
JavaScript Учебник HTML DOM EventListener
HTML DOM Reference: элемент. addEventListener()