JavaScript HTML DOM EventListener
Метод addEventListener()
Пример
Добавьте прослушиватель событий, который срабатывает, когда пользователь нажимает кнопку:
document.getElementById("myBtn").addEventListener("click", displayDate);
Метод addEventListener()прикрепляет обработчик события к указанному элементу.
Метод addEventListener()прикрепляет обработчик событий к элементу, не перезаписывая существующие обработчики событий.
К одному элементу можно добавить несколько обработчиков событий.
Вы можете добавить к одному элементу несколько обработчиков событий одного типа, т.е. два события "щелчка".
Вы можете добавить прослушиватели событий к любому объекту DOM, а не только к элементам HTML. т.е. объект окна.
Этот addEventListener()метод упрощает контроль за тем, как событие реагирует на всплытие.
При использовании addEventListener()метода JavaScript отделяется от разметки HTML для лучшей читабельности и позволяет добавлять прослушиватели событий, даже если вы не контролируете разметку HTML.
Вы можете легко удалить прослушиватель событий с помощью removeEventListener()метода.
Синтаксис
element.addEventListener(event, function, useCapture);
Первый параметр — это тип события (например, " click" или " mousedown" или любое другое событие HTML DOM ).
Второй параметр — это функция, которую мы хотим вызвать при возникновении события.
Третий параметр — это логическое значение, указывающее, следует ли использовать всплывающую или перехватывающую информацию о событиях. Этот параметр является необязательным.
Обратите внимание, что вы не используете префикс «on» для события; используйте " click" вместо " onclick".
Добавить обработчик событий к элементу
Пример
Оповещение «Привет, мир!» когда пользователь нажимает на элемент:
element.addEventListener("click", function(){ alert("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);
Добавьте обработчик событий в объект окна
Этот addEventListener()метод позволяет добавлять прослушиватели событий к любому объекту HTML DOM, например к элементам HTML, документу HTML, объекту окна или другим объектам, поддерживающим события, например xmlHttpRequestобъекту.
Пример
Добавьте прослушиватель событий, который срабатывает, когда пользователь изменяет размер окна:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
Передача параметров
При передаче значений параметров используйте «анонимную функцию», которая вызывает указанную функцию с параметрами:
Пример
element.addEventListener("click", function(){ myFunction(p1, p2); });
Всплывание событий или захват событий?
Есть два способа распространения событий в HTML DOM: всплытие и захват.
Распространение событий — это способ определения порядка элементов при возникновении события. Если у вас есть элемент <p> внутри элемента <div>, и пользователь щелкает элемент <p>, событие click какого элемента должно обрабатываться первым?
При всплытии сначала обрабатывается событие самого внутреннего элемента, а затем — внешнее: сначала обрабатывается событие щелчка элемента <p>, затем событие щелчка элемента <div>.
При захвате сначала обрабатывается событие самого внешнего элемента, а затем внутреннее: сначала будет обрабатываться событие щелчка элемента <div>, затем событие щелчка элемента <p>.
С помощью метода addEventListener() вы можете указать тип распространения с помощью параметра «useCapture»:
addEventListener(event, function, useCapture);
Значение по умолчанию — false, при котором будет использоваться всплывающее распространение. Если установлено значение true, событие использует распространение с захватом.
Пример
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
Метод removeEventListener()
Метод removeEventListener()удаляет обработчики событий, которые были присоединены с помощью метода addEventListener():
Пример
element.removeEventListener("mousemove", myFunction);
Справочник по объекту события HTML DOM
Список всех событий HTML DOM см. в нашем полном справочнике по объектам событий HTML DOM .