Метод addEventListener() DOM HTML

Определение и использование

addEventListener() Метод добавления обработчика событий к элементу.

Пример

Пример 1

Добавление click события к элементу <button>:

element.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

Попробуйте сами

Пример 2

Более компактный код:

element.addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});

Попробуйте сами

Более примеров можно найти в нижней части страницы.

Грамматика

element.addEventListener(type, function, useCapture)

Параметры

Параметры Описание
type

Обязателен. Название события.

Не используйте префикс "on".

Используйте "click", а не "onclick".


Полный список событий DOM
function Обязателен. Функция, выполняемая при наступлении события.
useCapture

Опционально (по умолчанию = false).

  • false - Исполнитель в фазе переливания выполняется.
  • true - Исполнитель в фазе захвата выполняется.

Возвратное значение

Нет.

Технические детали

Этот метод добавляет указанную функцию слушателя событий в набор слушателей событий текущего узла для обработки указанного типа type события. useCapture Установлено в true, то слушатель событий зарегистрирован как слушатель событий capture. Если useCapture Установлено в false, он зарегистрирован как обычный слушатель событий.

addEventListener() может быть вызван несколько раз, регистрируя несколько обработчиков событий одного типа на одном узле. Но要注意, что DOM не может определить порядок вызова нескольких обработчиков событий.

Если слушатель событий функции на одном и том же узле с type и useCapture Если параметр зарегистрирован дважды, то вторая регистрация будет проигнорирована. Если при обработке события на узле регистрируется новый слушатель событий, то новый слушатель событий не будет вызван для этого события.

Когда с Node.cloneNode() Метод или Document.importNode() Метод копирует узел Document, но не копирует зарегистрированные на исходном узле слушатели событий.

Этот метод также доступен Document и Window Объект определен и работает аналогичным образом.

Более примеров

Пример 3

Вы можете добавить множество событий к одному элементу:

element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);

Попробуйте сами

Пример 4

Вы можете добавить различные события к одному элементу:

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);

Попробуйте сами

Пример 5

Чтобы передать значения параметров, используйте "анонимную функцию":

element.addEventListener("click", function() {
  myFunction(p1, p2);
});

Попробуйте сами

Пример 6

Изменить цвет фона элемента <button>:

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

Попробуйте сами

Пример 7

Разница между бубblemaking и capture:

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

Попробуйте сами

Пример 8

Удаление обработчика событий:

element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);

Попробуйте сами

Поддержка браузеров

element.addEventListener() Это функция DOM Level 2 (2001).

Все браузеры полностью поддерживают его:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка 9-11 Поддержка Поддержка Поддержка Поддержка

Связанные страницы

Методы элемента:

Метод addEventListener()

Метод removeEventListener()

Методы документа:

Метод addEventListener()

Метод removeEventListener()

Урок:

HTML DOM EventListener

Полный список событий DOM