English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Объекты JavaScript

Справочник JavaScript

JS DOM справочник

Метод addEventListener() HTML DOM

Объект документа HTML DOM

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

Использованиеdocument.removeEventListener()Метод удаления обработчиков событий, связанных с методом addEventListener().

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

Синтаксис:

document.addEventListener(event, listener, useCapture)
document.addEventListener("click",　function()　{
alert("Hello World!!!");
});
Проверьте‹/›

Совместимость с браузерами

Числа в таблице указывают на первую версию браузера, которая поддерживает метод addEventListener():

Метод
addEventListener()1171.09

Значения параметров

ПараметрыОписание
event(обязательное) Событие может быть любымvalid JavaScript событием. При использовании событий не используйте префикс "on", например, используйте "click" вместо "onclick", "mousedown" вместо "onmousedown".
Для списка всех событий HTML DOM см. наш полныйСправочник по событиям HTML DOM.
listener(обязательное) Это может быть JavaScript-функция, которая реагирует на события.
Когда происходит событие, объект события передается в качестве первого параметра функции. Тип объекта события зависит от указанного события. Например, событие "click" относится к объекту MouseEvent.
useCapture(по умолчанию) Булево значение, определяющее, выполняется ли событие на этапе захвата или переливания. По умолчанию false.
Возможные значения:

  • true-Слушатели событий выполняются на этапе захвата

  • false-Слушатели событий выполняются на этапе переливания

Вы можете найти информацию оУрок по распространению событий в JavaScriptЧтение更多信息 о распространении событий

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

Возвратное значение:Нет
Версия DOM:DOM 2-й уровень

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

Добавьте событие "click" к документу. Когда пользователь нажимает на любую часть документа, используйте элемент <p> с id="para", чтобы вывести "Hello World":

document.addEventListener("click",　function()　{
document.querySelector("#para").innerHTML = "Hello World!!!";
});
Проверьте‹/›

Этот пример ссылается на внешнюю "именованную" функцию:

document.addEventListener("click", myFunc);
function myFunc() {
　　　document.body.style.backgroundColor = "coral";
}
Проверьте‹/›

Вы можете добавить множество событий к документу, не перекрывая существующие события:

document.addEventListener("click", myFunc);
document.addEventListener("click", anotherFunc);
Проверьте‹/›

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

document.addEventListener("mouseenter",　myFunc1);
document.addEventListener("click",　myFunc2);
document.addEventListener("mouseout",　myFunc3);
Проверьте‹/›

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

document.addEventListener("click",　function()　{
myFunc(x,　y);
});
Проверьте‹/›

Также можно посмотреть

Учебник JavaScript:Слушатель событий

Учебник JavaScript:Распространение событий

HTML DOM: справочникdocument.removeEventListener()

HTML DOM: справочникэлемент .addEventListener()

Объект документа HTML DOM

Объект элемента HTML DOMОбъект документа HTML DOM