Программы-слушатели событий HTML DOM на JavaScript

Метод addEventListener()

Пример

Добавить слушатель событий, который срабатывает при нажатии на кнопку:

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

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

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

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

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

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

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

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

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

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

грамматика

элемент.addEventListener(событие, функция, useCapture);

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

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

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

注意:не используйте префикс "on" для событий; используйте "click" вместо "onclick".

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

Пример

показать "Hello World!" при нажатии на элемент пользователем:

элемент.addEventListener("click", function(){ alert("Hello World!"); });

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

Вы также можете ссылаться на внешние "именованные" функции:

Пример

показать "Hello World!" при нажатии на элемент пользователем:

элемент.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

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

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

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

Пример

элемент.addEventListener("click", myFunction);
элемент.addEventListener("click", mySecondFunction);

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

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

Пример

элемент.addEventListener("mouseover", myFunction);
элемент.addEventListener("click", mySecondFunction);
элемент.addEventListener("mouseout", myThirdFunction);

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

добавить обработчик событий к объекту Window

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

Пример

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

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

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

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

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

Пример

элемент.addEventListener("click", function(){ myFunction(p1, p2); });

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

Всплытие событий или перехват событий?

В HTML DOM есть два метода пропагации событий: всплытие и перехват.

Пропагация событий - это метод определения порядка обработки элементов при возникновении событий. Если в элементе <div> есть элемент <p>, и пользователь нажал на элемент <p>, то событие "click" для какого элемента должно быть обработано primero?

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

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

В методе addEventListener() вы можете определить тип пропагации, используя параметр "useCapture":

addEventListener(событие, функция, useCapture);

по умолчанию falseто будет использоваться пропагация всплытием, если значение этого параметра установлено в trueЕсли этот параметр установлен в

Пример

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

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

с помощью метода removeEventListener()

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

Пример

элемент.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, Opera 6.0 и более ранние версии не поддерживают addEventListener() и removeEventListener() Метод. Однако, для этих специальных версий браузеров, вы можете использовать attachEvent() Метод добавления обработчика событий к элементу и вызова detachEvent() Метод удаления:

элемент.attachEvent(событие, функция);
элемент.detachEvent(событие, функция);

Пример

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

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.