Метод addEventListener() объекта Document DOM HTML

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

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

Пример

Пример 1

Добавить click событие к документу:

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

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

Простой синтаксис:

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

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

Пример 2

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

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

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

Пример 3

Вы можете добавить различные типы событий:

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

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

Пример 4

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

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

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

Пример 5

Измените цвет фона документа:

document.addEventListener("click", function(){
  document.body.style.backgroundColor = "red";
});

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

Пример 6

Используйте метод removeEventListener():

// Добавление слушателя событий
document.addEventListener("mousemove", myFunction);
// Удаление слушателя событий
document.removeEventListener("mousemove", myFunction);

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

Синтаксис

document.addEventListener(type, function, capture)

Параметры

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

Необходимо. Название события.

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

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

Все события HTML DOM перечислены здесь:

Руководство по объекту события HTML DOM
function

Необходимо. Функция, выполняющаяся при наступлении события.

Когда событие происходит, объект события передается в качестве первого параметра функции.

Тип события对象的 зависит от указанного события. Например, "click" событие относится к объекту MouseEvent.
capture

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

  • true - обработчик выполняется на этапе захвата
  • false - обработчик выполняется на этапе перетекания

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

Нет.

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

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

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

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

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

Этот метод также определен в объектах Document и Window, и работает аналогичным образом.

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

document.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