Метод addEventListener()
Примеры element.addEventListener()
Добавьте событие нажатия к элементу <button>:
element.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Привет, мир!";
}
Попробуйте сами »
Более компактный код:
element.addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Привет, мир!";
});
Попробуйте сами »
Ещё примеры ниже.
Описание addEventListener()
Метод addEventListener() прикрепляет обработчик событий к элементу.
Методы Element addEventListener()
Методы Document addEventListener()
Учебники addEventListener()
Синтаксис addEventListener()
element.addEventListener(event, function, useCapture)
Параметры addEventListener()
| Параметр | Описание |
|---|---|
| event | Обязательно. Название событий. Не используйте префикс "on". Используйте "click", а не "onclick". Полный список событий DOM. |
| function | Обязательно. Функция, которая будет запущена при возникновении события. |
| useCapture |
Optional (default = false).false - Обработчик выполняется в фазе всплытия.true - Обработчик выполняется в фазе захвата.
|
Возвращаемое значение addEventListener()
| НЕТ |
Ещё примеры addEventListener()
Вы можете добавить несколько событий к одному и тому же элементу:
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);
Попробуйте сами »
Поддержка браузера addEventListener()
element.addEventListener() является функцией DOM уровня 2 (2001).
Он полностью поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | 9-11 |