Элемент HTML DOM addEventListener()
Примеры
Добавьте событие клика к элементу <button>:
element.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Более компактный код:
element.addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Hello World";
});
Ниже приведены дополнительные примеры.
Определение и использование
Метод addEventListener()
прикрепляет обработчик события к элементу.
Смотрите также:
Метод element.removeEventListener()
Метод document.addEventListener()
Метод document.removeEventListener()
Учебники
Синтаксис
element.addEventListener(event, function, useCapture)
Параметры
Parameter | Description |
event | Required. The name of the event. Do not use the "on" prefix. Use "click" not "onclick". The Complete List of DOM Events. |
function | Required. The function to run when the event occurs. |
useCapture |
Optional (default = false).false - The handler is executed in the bubbling phase.true - The handler is executed in the capturing phase.
|
Возвращаемое значение
НИКТО |
Дополнительные примеры
Вы можете добавить много событий к одному и тому же элементу:
element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);
К одному и тому же элементу можно добавить разные события:
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);
Для передачи значений параметров используйте «анонимную функцию»:
element.addEventListener("click", function() {
myFunction(p1, p2);
});
Измените цвет фона элемента <button>:
element.addEventListener("click", function() {
this.style.backgroundColor = "red";
});
Разница между барботированием и захватом:
element1.addEventListener("click", myFunction, false);
element2.addEventListener("click", myFunction, true);
Удалить обработчик события:
element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);
Поддержка браузера
element.addEventListener()
является функцией DOM уровня 2 (2001 г.).
Он полностью поддерживается во всех браузерах:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |