JavaScript HTML DOM EventListener

Метод addEventListener()

Пример

Запустить событие прослушивателя, когда пользователь нажимает кнопку:

document.getElementById("myBtn").addEventListener("click", displayDate);

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

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

Обработчики событий, добавленные с помощью метода addEventListener(), не перезаписывают существующие обработчики событий.

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

Вы можете добавить несколько обработчиков событий одного типа к одному и тому же элементу, например два события "click".

Вы можете добавить прослушиватели событий к любому объекту DOM, а не только к элементам HTML. Например: объект window.

Метод addEventListener() упрощает управление событиями (всплытие против перехвата).

При использовании метода addEventListener() JavaScript отделяется от HTML-разметки для лучшей читаемости, и вы можете добавлять обработчики событий даже тогда, когда не контролируете HTML-разметку.

Вы можете использовать метод removeEventListener() для удаления обработчиков событий.

Синтаксис

element.addEventListener(event, function, useCapture);

Первый параметр — это тип события (например, "click" или "mousedown").

Второй параметр — это функция, которая будет вызвана при срабатывании события.

Третий параметр — это логическое значение, которое указывает, используется ли всплытие или перехват события. Этот параметр необязателен.

Note Примечание: не используйте префикс "on". Например, используйте "click" вместо "onclick".

Добавление обработчика события к элементу

Пример

Вывести "Hello World!" при клике пользователя по элементу:

element.addEventListener("click", function(){ alert("Hello World!"); });

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

Вы можете ссылаться на внешнюю функцию, используя её имя:

Пример

Вывести "Hello World!" при клике пользователя по элементу:

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}

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

Добавление нескольких обработчиков событий к одному элементу

Метод addEventListener() позволяет добавлять несколько событий к одному элементу без перезаписи существующих событий:

Пример

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

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

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

Пример

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

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

Добавление обработчика событий к объекту window

Метод addEventListener() позволяет добавлять прослушиватели событий к объектам HTML DOM, таким как элементы HTML, HTML-документы и объект window. Или к другим поддерживаемым объектам событий, например к объекту xmlHttpRequest.

Пример

Добавьте прослушиватель событий, когда пользователь изменяет размер окна:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

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

Передача параметров

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

Пример

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

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

Всплытие событий или погружение событий?

Существует два способа распространения событий: всплытие и погружение.

Распространение событий определяет порядок, в котором запускаются события элементов. Если вы вставите элемент <p> внутрь элемента <div>, и пользователь щёлкнет по элементу <p>, событие "click" какого элемента сработает первым?

В случаевсплытияПри всплытии событие внутреннего элемента запускается первым, а затем запускается событие внешнего элемента. То есть: событие click элемента <p> запускается первым, затем событие click элемента <div>.

В случаепогруженияПри погружении событие внешнего элемента запускается первым, а затем запускается событие внутреннего элемента. То есть: событие click элемента <div> запускается первым, затем событие click элемента <p>.

Метод addEventListener() может принимать параметр "useCapture" для задания типа распространения:

addEventListener(event, function, useCapture);

Значение по умолчанию — false, что означает всплывающее распространение. Если значение равно true, событие использует перехватывающее распространение.

Пример

document.getElementById("myDiv").addEventListener("click", myFunction, true);

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

Метод removeEventListener()

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

Пример

element.removeEventListener("mousemove", myFunction);

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

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает этот метод.

Метод
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

Примечание:IE 8 и более ранние версии IE, а также Opera 7.0 и более ранние версии не поддерживают методы addEventListener() и removeEventListener(). Однако для этих версий браузеров можно использовать метод detachEvent() для удаления обработчиков событий:

element.attachEvent(event, function);
element.detachEvent(event, function);

Пример

Кроссбраузерное решение:

var x = document.getElementById("myBtn");
if (x.addEventListener) { // Все основные браузеры, кроме IE 8 и более ранних версий
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 и более ранние версии
    x.attachEvent("onclick", myFunction);
}

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

Справочник по объектам событий HTML DOM

Для всех событий HTML DOM вы можете просмотреть наш полныйСправочник по объектам событий HTML DOM. Другие расширения