Метод 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" или любое другое Событие HTML DOM.)
Второй параметр - это функция, которую мы хотим вызвать при возникновении события.
Третий параметр - это логическое значение, определяющее, следует ли использовать восходящую цепочку событий или захват событий.
Обратите внимание, что вы не используете префикс "on" для события; используйте "click" вместо "onclick".
Добавить обработчик событий к элементу
Оповещение "Привет Мир!" когда пользователь нажимает на элемент:
element.addEventListener("click", function(){ alert("Привет Мир!"); });
Попробуйте сами »
Вы также можете обратиться к внешней "именованной" функции:
Оповещение "Привет Мир!" когда пользователь нажимает на элемент:
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Привет Мир!");
}
Попробуйте сами »
Добавить несколько обработчиков событий к одному элементу
Метод 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, объекту окна или другим объектам, которые поддерживают события, например 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.