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

Объект JavaScript

Справочник JavaScript

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

Метод addEventListener() HTML DOM

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

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

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

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

Грамматика:

element.addEventListener(event, listener, useCapture)
var x = document.querySelector("button");
x.addEventListener("click", function() {
alert("Hello World!!!");
});
Проверьте, посмотрите‹/›

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

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

Метод
addEventListener()1171.09

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

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

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

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

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

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

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

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

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

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

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

document.querySelector("button").addEventListener("click", myFunc);
document.querySelector("button").addEventListener("click", anotherFunc);
Проверьте, посмотрите‹/›

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

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

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

var　btn　=　document.querySelector("button");
btn.addEventListener("click",　function()　{
myFunc(x,　y);
});
Проверьте, посмотрите‹/›

Связанные руководства

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

Учебник JavaScript:Трансляция событий

Референция HTML DOM:элемент.removeEventListener()

Референция HTML DOM:document.addEventListener()

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

Объект истории JavaScriptОбъект элемента HTML DOM