Спливання і перехоплення подій

Всі інтернет-сторінки складаються з окремих елементів (тегів). При виведенні станиці на екран браузер створює DOM-дерево. відбиває структуру документа (зв'язку між батьківськими і дочірніми елементами).

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

У прикладі нижче клік мишею по елементу викличе обробник onclick і на батьківському елементі

.

MARK всередині DIV

Стадії обробки події

Щоб знати, в якій послідовності будуть виконуватися обробники, необхідно мати уявлення про те, як браузер обробляє подія.

Саме вихідне подія для всіх обробників є загальним. Його обробка ділиться на три стадії:

Елемент, на якому виникає подія, називається цільовим.

стадія перехоплення

При виникненні події браузер черзі проходить від верхнього елементу DOM-дерева (document) вниз через усі проміжні елементи до цільового. Ця стадія обробки називається стадією перехоплення. Обробники запускаються до того, як подія дійде до цільового елемента. Подія як би перехоплюється. Звідси і випливає таку назву стадії.

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

Стадія перехоплення використовується дуже рідко, але іноді може стати в нагоді.

стадія мети

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

стадія спливання

Далі починається остання стадія. Подія проходить по черзі від цільового елемента через ланцюжок батьків до кореневого елемента документа. Подія просувається вгору по DOM-дереву. Воно ніби спливає. Звідси і назва - стадія спливання.

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

Проходження всіх стадій продемонстровано на прикладі нижче (запускається кліком по жовтому елементу):

обробники елемента