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".
Додайте обробник подій до елемента
Приклад
Сповіщення "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: bubbling (спливання) та capturing (захоплення).
Поширення події – це спосіб визначення порядку елементів, коли відбувається подія. Якщо у вас є <p> елемент у <div> і користувач клацає на <p> елемент, подія "клацання" повинна бути оброблена спочатку?
Під час спливання спочатку обробляється подія внутрішнього елемента, а потім зовнішня: спочатку обробляється подія клацання <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.
