JavaScript HTML DOM Слушатель событий
Метод 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".
Добавить обработчик событий к элементу
Пример
Оповещение "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);
Попробуйте сами »
Добавить обработчик событий в объект окна
Метод addEventListener() позволяет добавлять прослушиватели событий к любому объекту HTML DOM, например элементам HTML, документу HTML, объекту окна или другим объектам, которые поддерживают события, как объект xmlHttpRequest.
Пример
Добавить прослушиватель событий, который запускается, когда пользователь изменяет размер окна:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
Попробуйте сами »
Передача параметров
При передаче значений параметров используйте "анонимную функцию", которая вызывает указанную функцию с параметрами:
Всплывающие события или захват событий?
Есть два способа распространения событий в 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():
Справка по объекту события HTML DOM
Список всех событий HTML DOM смотрите в полном Справочнике по объектам событий HTML DOM на нашем сайте W3Schools на русском.
