JavaScript – Способи підписки на події. JavaScript - Способи передплати подій Події на елементах керування

Прикласти подію клацання на елемент. Коли користувач натискає кнопку, вихід "Hello World" в

Елемент з ідентифікатором = "демо":

document.getElementById("demo").innerHTML = "Hello World";
});

Спробуй сам

Більше "Try it Yourself" приклади нижче.

Визначення та використання

addEventListener() метод надає обробнику події для зазначеного елемента.

приклад

Ви можете додати багато подій до одного елемента без перезапису існуючих подій.

У цьому прикладі показано, як додати дві події клацання на одній і тій же

елемента:

Document.getElementById("myBtn").addEventListener("click", myFunction);

Спробуй сам

приклад

Ви можете додавати різні типи подій до одного елемента.

Цей приклад показує, як додати багато подій на одній і тій же

елемента:

Document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction);

Спробуй сам

приклад

При наданні значень параметрів використовуйте "anonymous function" , яка викликає вказану функцію з параметрами:

Document.getElementById("myBtn").addEventListener("click", function() (
myFunction(p1, p2);
});

Спробуй сам

приклад

Зміна кольору фону

елемента:

Document.getElementById("myBtn").addEventListener("click", function()(
this.style.backgroundColor = "red";

JavaScript EventTarget

Визначення та застосування

JavaScript метод addEventListener()об'єкт EventTarget дозволяє зареєструвати обробник подій певного типу для конкретної мети.

В якості мети можуть виступати як такі об'єкти як Element, Document, Window, або будь-які інші об'єкти, які підтримують події, наприклад, такий об'єкт як XMLHttpRequest, який широко використовується в асинхронних запитах AJAX(Від англ. Asynchronous Javascript and XML- "асинхронний JavaScript і XML"), що дозволяє конкретній сторінці оновлювати лише її частину, не порушуючи при цьому роботу користувача.

Звертаю Вашу увагу на те, що Ви можете використати метод removeEventListener()для видалення обробника подій, приєднаного за допомогою методу addEventListener().

Підтримка браузерами

JavaScript синтаксис:

target.addEventListener( type, listener); target.addEventListener( type, listener, options); target.addEventListener( type, listener, useCapture); type- String listener- Function options- Object useCapture- Boolean

Специфікація

Document Object Model (DOM) Level 2 Events

Значення параметрів

Параметр	Опис
type	Строкове значення, що представляє тип події для прослуховування (значення чутливе до регістру). Обов'язковий параметр.
listener	Об'єкт, який отримує повідомлення у разі виникнення події зазначеного типу (об'єкт, що реалізує інтерфейс Event ). Це має бути об'єкт, що реалізує інтерфейс EventListener, або функція JavaScript. Обов'язковий параметр.
options	Об'єкт, що вказує на характеристики прослуховувача подій (є необов'язковим параметром). Доступні опції: capture - Логічне значення, яке визначає, чи будуть події цього типу відправлені зареєстрованому прослуховувачу (обробнику події) перед відправкою будь-якому EventTarget DOM. Якщо передати логічне значення true , то функція буде зареєстрована як перехоплюючий обробник і буде викликатись у фазі перехоплення ( capture phasebubbling phase). once - Логічне значення, яке вказує на те, що обробник події повинен бути викликаний не більше одного разу після додавання. Якщо вказано логічне значення true , прослуховувач буде автоматично видалений під час виклику. passive - Логічне значення, яке, якщо відповідає значенню true , вказує на те, що функція, вказана прослуховувачем, ніколи не скасує дію за умовчанням (викличе метод preventDefault() preventDefault() , то браузер користувача проігнорує його, і створить при цьому попередження у консолі.
useCapture	Логічне значення, яке визначає чи будуть події цього типу відправлені зареєстрованому прослуховувачу (обробнику події) перед відправкою будь-якому EventTarget, розташованому під ним у дереві DOM. Якщо передати логічне значення true , то функція буде зареєстрована як перехоплюючий обробник і буде викликатись у фазі перехоплення ( capture phase). Значення за умовчанням false - обробник події спрацьовуватиме у фазі спливання ( bubbling phase). Необов'язковий параметр.Параметр useCaptureне завжди був необов'язковим, в ідеалі, ви повинні увімкнути його для більш широкої браузерної підтримки.

Приклад використання

Базове використання методу

• 1

У цьому прикладі ми розмістили маркований список (

), всередині якого ми розмістили п'ятьелементів списку (
• ). За допомогою методу querySelector() ми вибрали першийелемент
  у документі, а за допомогою методу querySelectorAll() всі елементи
  • у документі, та ініціалізували змінні цими значеннями.

    За допомогою методу addEventListener()ми встановили елемент

    обробник події "click" (натискання лівою кнопкою миші на елементі), який за допомогою властивості target об'єкта Event перевіряє ім'я тега елемента, і якщо це значення відповідає значенню "LI", то змінює стиль кольору тексту на зеленийпри спрацьовуванні. Зверніть увагу, що найчастіше зручніше встановити один обробник на батьківський елемент, а не для кожного елемента окремо, особливо це актуально при динамічній зміні кількості елементів, в цьому випадку відсутня необхідність оновлювати обробники для елементів.

    Якщо вказано логічне значення true , то функція, вказана прослуховувачем, ніколи не скасує дію за промовчанням (викличе метод preventDefault()). Якщо обробник події все ж таки викличе метод preventDefault() , то браузер користувача проігнорує його, і створить попередження в консолі. Логічне значення false свідчить про те, що функція обробник може скасувати дію за промовчанням (може викликати метод preventDefault()).

    Згідно зі специфікацією, значення за замовчуванням для параметра passive завжди дорівнює false. Однак це дає можливість прослуховувачам подій, які обробляють певні події торкання блокувати основний потік браузера при спробі обробки прокручування, що може призвести до значного зниження продуктивності під час обробки прокручування.

    Щоб запобігти цій проблемі, деякі браузери (зокрема, і ) змінили значення за промовчанням pasive на true для подій touchstart і touchmove у вузлах рівня документа Window , Document і Document .body. Це запобігає виклику прослуховувача подій, тому він не може блокувати відображення сторінки під час прокручування.

    Вам не потрібно турбуватися про значення passive для базової події прокручування (scroll ), оскільки його не можна скасувати, прослуховувачі подій у жодному разі не зможуть блокувати показ сторінки.

    Нюанси використання цього в обробнику події

    Як правило, необхідно передавати елемент, на якому спрацював обробник події, особливо це актуально при використанні узагальненого обробника подій для елементів одного типу. Якщо додати звичайну функцію обробник події до елемента за допомогою методу addEventListener(), то значення this всередині такого обробника буде посилання на елемент. Значення цього буде співпадати зі значенням властивості currentTarget аргументу події об'єкта Event , що передається обробнику події, наприклад:

    elem.addEventListener("click", function ( e) (console .log(this .className); // виведе в консоль значення властивості className елемента elem console .log( e.currentTarget === this ); // true)))

    Зверніть увагу на важливий момент, значення цього може змінюватися, наприклад, стрілочні функції не мають власного контексту цього і в цьому випадку це не буде посилатися на елемент:

    elem.addEventListener("click", ( e) => (console .log(this .className); // this не посилатиметься на елемент elem console .log( e.currentTarget === this ); // false)

    Давайте розберемо ще ситуацію, за якої обробник події вказаний як атрибут події на HTMLелемент. Код JavaScriptУ значенні атрибута ефективно упаковується у функцію обробника, яка пов'язує значення цього способу, що відповідає методу addEventListener()(this у коді представляє посилання на елемент):

    id = "btn" type = "button" onclick = "console.log(this.id)" > // виведе в консоль значення якості id елемента

    При натисканні на елемент

в консоль буде виведена інформація про значення глобального атрибута елемента, так як значення this всередині функції, що викликається кодом у значенні атрибута поводиться відповідно до стандартних правил, і посилається в даному випадку на елемент, який ініціював подію. Давайте розглянемо наступний приклад:

id = "btn" type = "button" onclick = "myFunc()" > <-- добавляем атрибут событий onclick -->

Зверніть увагу на важливий момент, значення this всередині функції myFunc()буде посиланням на глобальний об'єкт Window , або відповідатиме значенню undefined у тому випадку, якщо вказано строгий режим ( strict mode).

Для того, щоб передати необхідний контекст, Ви можете використовувати метод call() об'єкта Function, який дозволяє викликати (виконувати) функцію як метод об'єкта, встановлюючи її контекст виконання (this) у вказане значення, передаючи при цьому необхідні аргументи:

id = "btn" type = "button" onclick = "myFunc.call( this )"> <-- добавляем атрибут событий onclick -->

В цьому випадку при спрацюванні події в консоль буде виводитись значення глобального атрибута елемента, який викликав подію.

У цій статті ми розглянемо різні способи, за допомогою яких можна підписатися на події елементів веб-сторінки. Один із способів заснований на використанні атрибутів HTML, два інших способи здійснюються через JavaScript за допомогою властивості on або методу addEventListener() .

Як передплатити подію?

• Підписатися через HTML-код (не рекомендується використовувати).
• Через код JavaScript за допомогою завдання елементу властивості on[подія] , де [подія] - це ім'я певної події.
• Через код JavaScript за допомогою спеціального методу addEventListener.

Підписка на подію через HTML

Цей спосіб ґрунтується на використанні атрибуту, який має вигляд on[подія] , де [подія] - це ім'я певної події.

Основні дії: додати до елемента певний атрибут (наприклад: onclick – де: on означає подію, а click – вид події) зі значенням, що містить оператор або функцію. Цей оператор або функція буде виконуватися при настанні цієї події у елемента.

Наприклад, додати до кнопки подію click , при настанні якої буде виводитись повідомлення за допомогою методу alert:

Якщо в обробнику події потрібно виконати певний код, необхідно використовувати функцію.

Наприклад, виконаємо наведений вище приклад з використанням функції:

Наприклад, додати до кнопки подію click , при настанні якої виконується вказана функція:

Цей варіант підписки на подію не рекомендується, т.к. він не тільки захаращує код HTML, але й має обмеження, пов'язані з використанням об'єкта event, ключового слова this та ін.

Цей спосіб підписки на подію здійснюється через JavaScript за допомогою завдання елементу властивості on [подія] . Основний принцип цього методу полягає в наступному:

1. Знайти елемент (об'єкт) у DOM-дереві, на подію якого Ви хочете передплатити.
2. Додати знайденому об'єкту властивість, яка повинна мати такий вигляд:
   on [подія], де [подія] - це ім'я певної події.
   Після цього необхідно цій властивості привласнити обробник, тобто. безіменну або деяку зазначену функцію, яка виконуватиметься при настанні цієї події.

Наприклад, додати до кнопки, що має id="myButton" подію click , при настанні якої виконується вказана функція:

//Знайти елемент на подію, яку Ви хочете передплатити var myButton = document.getElementById("myButton"); //додати до об'єкта властивість, що має ім'я on[подія] //при настанні події click виконується функція myFunction myButton.onclick = myFunction; //функція myFunction function myFunction() ( //код функції //... )

Якщо подія задається через атрибут, то браузер, читаючи HTML код, створює відповідну властивість автоматично. Тобто. браузер працює з подіями лише за допомогою відповідних властивостей об'єкта (елемента).

Якщо Ви підпишіться на подію у різний спосіб, тобто. через атрибут і з допомогою властивості, то браузер у разі буде використовувати лише варіант реалізації події, виконаний з допомогою властивості. Підписуватись на події краще лише за допомогою відповідних властивостей об'єкта (елемента), використовувати атрибути для цих цілей не рекомендується.

Підписка на подію через JavaScript за допомогою методу addEventListener

Цей спосіб підписки на подію здійснюється через код JavaScript за допомогою спеціального методу addEventListener. Цей спосіб передплати є найкращим і рекомендується стандартом.

Метод addEventListener призначений для додавання прослуховувача (listener) певної події (event) до елемента та виконання обробника (callback) при його наступі. Крім методу addEventListener є ще один метод removeEventListener, який призначений для виконання зворотної дії, тобто. видалення прослуховувача.

Синтаксис методів addEventListener та removeEventListener:

Element.addEventListener(event, callback, phase); element.removeEventListener(event, callback, phase);

Метод addEventListener має 3 параметри:

• event (обов'язковий) – ім'я події, на яку Ви хочете підписатися (прослуховувати);
• callback (обов'язковий) - функція (анонімна чи іменована), яка виконуватиме обробку події;
• phase (не обов'язковий) - етап, у якому перехоплюватиметься подія. Цей параметр приймає 2 значення: true (на етапі занурення (перехоплення) події) та false (на етапі спливання події). Якщо цей параметр не вказати, буде використано значення false .

Наприклад, використання анонімної функції для обробки події "click":

Element.addEventListener("click", function ( //... ));

Наприклад, використання функції myFunction() для обробки події "click":

Element.addEventListener("click", myFunction); //функція myFunction function myFunction() ( //... )

Обробник події, який Ви додали за допомогою методу addEventListener(), можна при необхідності видалити за допомогою методу removeEventListener() . Видалити обробник події можна тільки в тому випадку, якщо він методом addEventListener() заданий у вигляді іменованої функції. Якщо Ви задали обробник у вигляді анонімної функції в методі addEventListener() , його видалити за допомогою методу removeEventListener() не вийде.

Наприклад, додати, а потім видалити обробник myFunction для події mousemove об'єкта document:

//додати для події mousemove об'єкта document обробник, заданий у вигляді функції myFunction document.addEventListener("mousemove",myFunction); //Видалити у події mousemove об'єкта document обробник, заданий у вигляді функції myFunction document.removeEventListener("mousemove", myFunction);

Document.addEventListener("click",myFunction); function myFunction() ( alert("I LOVE JAVASCRIPT!"); )

Наприклад, додати кілька обробників подій, які будуть виконуватися при натисканні в області, що належить документу:

Document.addEventListener("click",myFunction1); document.addEventListener("click",myFunction2);

Наприклад, додати об'єкту document обробники для наступних подій: click , mouseover , mouseout .

Document.addEventListener("mouseover",myFunction1); document.addEventListener("click",myFunction2); document.addEventListener("mouseout",myFunction3);

Наприклад, для передачі обробнику значень параметрів будемо використовувати анонімну функцію. У цій анонімній функції будемо використовувати ще одну функцію (іменовану) за допомогою якої будемо передавати необхідні параметри:

Document.addEventListener("click",function() ( myFunction(parameter1, parameter2); ));

Наприклад, при настанні події click в документі змінити колір фону елемента body . Обробник події виконати у вигляді анонімної функції.

Document.addEventListner("click",function() ( document.body.style.backgroundColor = green; ));

Як правильно працювати з подіями

Працювати в JavaScript з документом HTML (DOM-деревом) і обробляти події необхідно тільки після того, як сторінка повністю завантажиться:

//Коли вся сторінка завантажилася, викликаємо нашу функцію pageInit window.addEventListener("load", pageInit); //функція pageInit() function pageInit() ( //підписуємося на події )

Window.addEventListener("load", function() ( //підписуємось на події )

Більш правильно працювати не з подією load (відбувається після повного завантаження сторінки), а з подією DOMContentLoaded, яка відбувається після того, як браузер завантажив документ HTML і побудував DOM-дерево. Тобто. Для того щоб працювати з DOM-деревом немає необхідності чекати поки завантажаться всі ресурси HTML-сторінки достатньо, щоб браузер побудував дерево DOM.

//HTML документ завантажився і дерево DOM побудоване document.addEventListener("DOMContentLoaded", pageInit); //функція pageInit() function pageInit() ( //підписуємося на події )

Наведений вище код можна записати коротше, за допомогою анонімної функції:

Document.addEventListener("DOMContentLoaded", function() ( //підписуємося на події )

Одночасно підписати на подію одразу кілька об'єктів

Наприклад, підписати на подію click одразу всі елементи p. Обробку події виконувати за допомогою функції myFunction():

Document.addEventListener("DOMContentLoaded", function() ( var elementsP = document.getElementsByTagName("P"); for (var i=0; i< elementsP.length, i++) { elementsP[i].addEventListener("click", myFunction); } } //функция myFunction() function myFunction() { //... }

Опис

Метод addEventListener() реєструє обробник події для цільового об'єкта (eventTarget), якого він буде викликатися у разі події. Цільовим об'єктом може бути об'єкт Element, Document, Window або будь-який інший об'єкт, що підтримує події, наприклад, такий як XMLHttpRequest.

Синтаксис

eventTarget.addEventListener(тип_події, обробник, фаза);

Аргументи

• тип_події: рядок, що вказує тип події, для якого реєструється обробник. Тип події вказується без префіксу on.
• обробник: функція вираз або ім'я функції, яка повинна викликатись при виникненні події, зазначеного типу.
• фаза: Бульове значення, яке визначає, для якої фази поширення події буде зареєстрований обробник. Можливі значення:
  • true – реєструє обробник події для фази перехоплення.
  • false – реєструє обробник події для фази спливання.

Значення, що повертається

• Ні.

Примітка: метод addEventListener() можна викликати більше одного разу і зареєструвати з його допомогою кілька різних обробників подій для того самого типу події в тому ж цільовому об'єкті. При події в об'єкті будуть викликані всі обробники, зареєстровані для зазначеного типу події, в порядку їх реєстрації.Спробувати

Приклад

Обробка подій

Клієнтські програми на мові JavaScript засновані на моделі програмування, коли виконання програми керується подіями. При такому стилі програмування веб-браузер генерує подію, коли з документом або деяким елементом щось відбувається. Наприклад, веб-браузер генерує подію, коли завершує завантаження документа, коли користувач наводить вказівник миші гіперпосилання або натискає клавішу на клавіатурі.

Якщо JavaScript-програма цікавить певний тип події для певного елемента документа, вона може зареєструвати одну або більше функцій, які будуть викликатися при виникненні цієї події. Майте на увазі, що це не є унікальною особливістю веб-програмування: всі програми з графічним інтерфейсом користувача діють саме таким чином - вони постійно чекають, поки щось відбудеться (тобто чекають на події), і відгукуються на те, що відбувається.

Тип події- Це рядок, що визначає тип дії, що спричинив подію. Тип "mousemove", наприклад, означає, що користувач перемістив вказівник миші. Тип «keydown» означає, що натиснуто клавішу на клавіатурі. А тип «load» означає, що завершилося завантаження документа (або іншого ресурсу) з мережі. Оскільки тип події – це просто рядок, його іноді називають іменем події.

Ціль події- це об'єкт, у якому виникла подія або з якою ця подія пов'язана. Коли говорять про подію, зазвичай згадують тип і мету події. Наприклад, подія "load" об'єкта Window або подія "click" елемента

. Найбільш типовими цілями подій у клієнтських програмах мовою JavaScript є об'єкти Window, Document та Element, але деякі типи подій можуть відбуватися і в інших типах об'єктів.

Обробник події- це функція, яка обробляє, чи відгукується подія. Програми повинні зареєструвати свої функції обробників подій у веб-браузері, вказавши тип події та ціль. Коли у зазначеному цільовому об'єкті виникне подія вказаного типу, браузер викличе обробник. Коли обробники подій викликаються для якогось об'єкта, іноді говоримо, що браузер «порушив» або «згенерував» подію.

Об'єкт події- це об'єкт, пов'язаний з певною подією і містить інформацію про цю подію. Об'єкти подій передаються функції обробника події у вигляді аргументу (крім IE8 і раніше версій, де об'єкт події доступний лише як глобальної змінної event). Усі об'єкти подій мають властивість type, що визначає тип події, та властивість target, Що визначає мету події.

Для кожного типу події у зв'язаному об'єкті події визначається набір властивостей. Наприклад, об'єкт, пов'язаний з подіями від миші, включає координати вказівника миші, а об'єкт, пов'язаний з подіями від клавіатури, містить інформацію про натиснутій клавіші та про натиснені клавіші-модифікатори. Для багатьох типів подій визначаються лише стандартні властивості, такі як type та target, і не передається жодної додаткової корисної інформації. Для таких типів подій важлива сама наявність події, і жодна інша інформація не має значення.

Поширення події- це процес, під час якого браузер вирішує, у яких об'єктах слід викликати обробники подій. У разі подій, призначених для єдиного об'єкта (таких як подія "load" об'єкта Window), потреба в їх поширенні відсутня. Однак, коли певна подія виникає в елементі документа, вона поширюється, або спливає, вгору по дереву документа.

Якщо користувач клацне мишею на гіперпосиланні, подія "mousemove" спочатку буде порушена в елементі , Що визначає це посилання. Потім воно буде доставлене елементам, що вміщають: можливо, елементу

Елементу

та самому об'єкту Document. Іноді зручніше буває зареєструвати єдиний обробник події в об'єкті Document або в іншому контейнерному елементі, ніж виконувати реєстрацію у всіх елементах, що нас цікавлять.

Давши визначення деяким термінам, можна перейти до вивчення питань, пов'язаних із подіями та їх обробкою.

Реєстрація обробників подій

Існує два основних способи реєстрації обробників подій. Перший, що з'явився на ранньому етапі розвитку Всесвітньої павутини, полягає у встановленні якості об'єкта або елемента документа, що є метою події. Другий спосіб, новий і більш універсальний, полягає в передачі обробника методу об'єкта або елемента.

Справа ускладнюється тим, що кожен прийом має дві версії. Властивість обробника події можна встановити в програмному коді мовою JavaScript або елемент документа, визначивши відповідний атрибут безпосередньо в розмітці HTML. Реєстрація обробників викликом методу може бути виконана стандартним методом з ім'ям addEventListener(), який підтримується всіма браузерами, крім IE версії 8 та нижче, та іншим методом, з ім'ям attachEvent(), що підтримується всіма версіями IE до IE9.

Встановлення властивостей обробників подій

Найпростіший спосіб зареєструвати обробник події полягає в тому, щоб привласнити цільового об'єкта події бажану функцію обробника. За згодою властивості обробників подій мають імена, що складаються зі слова «on», за яким слідує ім'я події: onclick, onchange, onload, onmouseover і т.д. Зверніть увагу, що ці імена властивостей чутливі до регістру і в них використовуються лише малі символи, навіть коли ім'я типу події складається з декількох слів (наприклад, «readystatechange»). Нижче наведено два приклади реєстрації обробників подій:

// Присвоїти функцію властивості onload об'єкта Window. // Функція - обробник події: вона викликається, коли документ завантажиться window.onload = function() ( // Знайти елемент

var elt = document.getElementById("shipping_address"); // Зареєструвати обробник події, який буде викликатися // безпосередньо перед відправкою форми elt.onsubmit = function() ( return validate(this); ) )

Такий спосіб реєстрації обробників подій підтримується у всіх браузерах для всіх типів подій, що часто використовуються. Взагалі кажучи, всі прикладні інтерфейси, що отримали широку підтримку, які визначають свої події, дозволяють реєструвати обробники установкою властивостей обробників подій.

Недолік використання властивостей обробників подій у тому, що вони проектувалися у припущенні, що цілі подій матимуть трохи більше одного оброблювача кожного типу подій. При створенні бібліотеки для використання в довільних документах для реєстрації обробників краще використовувати прийом (такий як виклик методу addEventListener()), який не змінює та не затирає раніше зареєстровані обробники.

Встановлення атрибутів обробників подій

Властивості обробників подій в елементах документа також можна встановлювати, визначаючи значення атрибутів у відповідних HTML-тегах. У цьому випадку значення атрибута має бути рядком програмного коду JavaScript. Цей програмний код має бути повним оголошенням функції обробника події, лише її тілом. Тобто реалізація обробника події в розмітці HTML не повинна полягати у фігурних дужках та випереджатися ключовим словом function. Наприклад:

Якщо значення HTML-атрибута обробника події складається з кількох JavaScript-інструкцій, вони повинні відокремлюватися крапками з комою або значення атрибута має розташовуватись у кількох рядках.

Деякі типи подій призначені для браузера загалом, а чи не для якогось конкретного елемента документа. Обробники таких подій в JavaScript реєструються в об'єкті Window. У розмітці HTML вони мають бути поміщені в тег , але браузер зареєструє їх у об'єкті Window. Нижче наводиться повний перелік таких обробників подій, що визначаються проектом специфікації HTML5:

onafterprint onfocus ononline onresize onbeforeprint onhashchange onpagehide onstorage onbeforeunload onload onpageshow onundo onblur onmessage onpopstate onunload onerror onoffline onredo

При розробці клієнтських сценаріїв зазвичай прийнято відокремлювати розмітку HTML від програмного коду мовою JavaScript. Програмісти, які дотримуються цього правила, уникають (або принаймні намагаються уникати) використовувати HTML-атрибути обробників подій, щоб не змішувати програмний код мовою JavaScript та розмітку HTML.

addEventListener()

У стандартній моделі подій, що підтримується всіма браузерами, крім IE версії 8 і нижче, метою події може бути будь-який об'єкт – включаючи об'єкти Window та Document та всі об'єкти Elements елементів документа – визначальний метод з ім'ям addEventListener(), за допомогою якого можна реєструвати обробники подій для цього.

Метод addEventListener() приймає три аргументи. Перший - тип події, для якого реєструється обробник. Тип (або ім'я) події має бути рядком і не повинен включати префікс «on», який використовується при установці властивостей обробників подій. Другим аргументом методу addEventListener() передається функція, яка має викликатися у разі події зазначеного типу. В останньому аргументі метод addEventListener() передається логічне значення. Зазвичай, у цьому аргументі передається значення false. Якщо передати в ньому значення true, функція буде зареєстрована як перехоплюючий обробник і буде викликатись у іншій фазі поширення події.

Специфікація з часом може змінитися так, що допустимо опускати третій аргумент замість того, щоб явно передавати в ньому значення false, але на момент написання цих рядків відсутність третього аргументу в деяких поточних браузерах призводила до помилки.

Наступний фрагмент реєструє два обробники події "click" в елементі

. Зверніть увагу на відмінності двох прийомів:

Натисніть на мене!