пример
Приложить событие щелчка на <button> элемента. Когда пользователь нажимает на кнопку, выход "Hello World" в <p> элемент с идентификатором = «демо»:
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
}); Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
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) .
Синтаксис
element .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" функции.
Этот пример показывает , как выполнить функцию , когда пользователь нажимает на <button> элемента:
document.getElementById("myBtn").addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Попробуй сам " пример
Вы можете добавить много событий к одному элементу, без перезаписи существующих событий.
В этом примере показано , как добавить два события щелчка на одной и той же <button> элемента:
document.getElementById("myBtn").addEventListener("click",
myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction); Попробуй сам " пример
Вы можете добавлять события различных типов к одному элементу.
Этот пример показывает , как добавить много событий на одной и той же <button> элемента:
document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction); Попробуй сам " пример
При передаче значений параметров используйте "anonymous function" , которая вызывает указанную функцию с параметрами:
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
}); Попробуй сам " пример
Изменение цвета фона <button> элемента:
document.getElementById("myBtn").addEventListener("click", function(){
this.style.backgroundColor = "red";
}); Попробуй сам " пример
Используя дополнительный параметр useCapture , чтобы продемонстрировать разницу между барботированием и захватом:
document.getElementById("myDiv").addEventListener("click", myFunction,
true); Попробуй сам " пример
Использование removeEventListener() метод , чтобы удалить обработчик события , который был прикреплен с addEventListener() метод:
// Attach an event handler to <div>
document.getElementById("myDIV").addEventListener("mousemove",
myFunction);
// Remove the event handler from <div>
document.getElementById("myDIV").removeEventListener("mousemove", myFunction); Попробуй сам " пример
Для браузеров , которые не поддерживают addEventListener() метод, вы можете использовать attachEvent() метод.
Этот пример демонстрирует решение кросс-браузер:
var x = document.getElementById("myBtn");
if (x.addEventListener) {
// For all major browsers, except IE 8 and earlier
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
// For IE 8 and earlier versions
x.attachEvent("onclick", myFunction);
} Попробуй сам " Похожие страницы
JavaScript Учебник HTML DOM EventListener
HTML DOM Ссылка: документ. addEventListener()