Page 125 - 6108

– код html змішується з кодом JavaScript, в зв'язку з чим стає важче
розробляти, налагоджувати і підтримувати додаток;
– обробники подій можна задати тільки для вже створених на веб-
сторінці елементів. Динамічно створювані елементи в цьому випадку
позбавляються можливості обробки подій;
– до елементу для однієї події може бути прикріплений тільки один
обробник;
– не можна видалити обробник без зміни коду.
Інший підхід один спосіб привязки обробників подій надає використання
8
підписників. Для роботи з підпісниками в JavaScript є об'єкт EventTarget ,
який визначає методи:
addEventListener() – для додавання підписника
removeEventListener() – для видалення підписника.
dispatchEvent() – для генерування події.
І оскільки html-елементи DOM теж є об'єктами EventTarget, то вони
також мають ці методи. Фактично підписники представляють ті ж функції
обробників.
Підписка на подію

target.addEventListener (type, listener [, options]);
target.addEventListener (type, listener [, useCapture]);

type – рядок, що представляє тип події, на яку прослуховують
listener – об'єкт, який приймає повідомлення, коли подія зазначеного
типу відбулася. Це повинен бути об'єкт, який реалізує інтерфейс
9
EventListener або просто функція JavaScript.
options (необовязковий) – об'єкт options, який визначає
характеристики об'єкта, що прослуховує подію. Може приймати наступні
параметри:
capture: Boolean вказує, що події цього типу будуть відправлені
зареєстрованому слухачеві listener перед відправкою на
EventTarget, що розташований нижче в дереві DOM.

once: Boolean вказує, що слухач повинен бути викликаний не більше
одного разу після додавання. Якщо true, слухач автоматично
видаляється при виклику.
passive: Boolean вказує, що слухач ніколи не викличе
preventDefault(). Якщо все ж виклик буде проведений, браузер
повинен ігнорувати його і генерувати консольне попередження.
useCapture (необов'язковий) – якщо true, вказує, що подія повинна
бути оброблена на стадії перехвату. Події, що піднімаються вгору по дереву, не
будуть оброблятися цим обробником. Значення useCapture за замовчуванням
дорівнює false.

<div id="rect">Натисни на текст</div>

8
EventTarget - це інтерфейс, який реалізується об'єктами, які можуть
генерувати події і можуть мати передплатників на ці події.
9
об'єкти JavaScript Function автоматично реалізують цей інтерфейс