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

Тому якщо в прикладі вище клікнути на P, то послідовно виведуться alert: p → div → form.

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

event.target

На якому б елементі ми ні зловили подія, завжди можна дізнатися, де саме воно сталося.
Найглибший елемент, який викликає подія, називається «цільовим» або «вихідним» елементом і доступний як event.target.

Відмінності від this (= event.currentTarget):

• event.target - це вихідний елемент, на якому відбулася подія, в процесі спливання він незмінний.
• this - це поточний елемент, до якого дійшло спливання, на ньому зараз виконується оброблювач.

Наприклад, якщо стоїть тільки один обробник form.onclick, то він «зловить» все кліки всередині форми. Де б не був клік всередині - він спливе до елемента , на якому спрацює обробник.

• this (= event.currentTarget) завжди буде сама форма, так як обробник спрацював на ній.
• event.target буде містити посилання на конкретний елемент всередині форми, самий вкладений, на якому стався клік.

Можлива і ситуація, коли event.target і this - один і той же елемент, наприклад якщо в формі немає інших тегів і клік був на самому елементі .

Припинення спливання події

Спливання йде прямо наверх. Зазвичай подія буде спливати наверх і наверх, до елемента . а потім до document. а іноді навіть до window. викликаючи все обробники на своєму шляху.

Але будь-який проміжний обробник може вирішити, що подія повністю оброблено, і зупинити спливання.

Для зупинки спливання потрібно викликати метод event.stopPropagation ().

Наприклад, тут при кліці на кнопку обробник body.onclick не спрацює:

код:
кликни мене

Перехоплення події. event.stopImmediatePropagation # 40; # 41;

Якщо у елемента є кілька обробників на одну подію, то навіть при припиненні спливання всі вони будуть виконані.

Тобто, stopPropagation перешкоджає просуванню події далі, але на поточному елементі все обробники відпрацюють.

Для того, щоб повністю зупинити обробку, сучасні браузери підтримують метод event.stopImmediatePropagation (). Він не тільки запобігає спливання, а й зупиняє обробку подій на поточному елементі.

відмінності IE8-

Щоб було простіше орієнтуватися, я зібрав відмінності IE8-, які мають відношення до спливання, в одну секцію.

Їх знання знадобиться, якщо ви вирішите писати на чистому JS, без фреймворків і вам знадобиться підтримка IE8-.

Ні властивості event.currentTarget

Звернемо увагу, що при призначенні обробника через on властивість у нас є this. тому event.currentTarget. як правило, не потрібно, а ось при призначенні через attachEvent обробник не отримує this. так що поточний елемент, якщо потрібен, можна буде взяти лише з замикання.

Замість event.target в IE8- використовується event.srcElement

Якщо ми пишемо обробник, який буде підтримувати і IE8- і сучасні браузери, то можна почати його так:

Код: elem.onclick = function (event) event = event || window.event;
var target = event.target || event.srcElement;

//. тепер у нас є об'єкт події і target
.
>

Для зупинки спливання використовується код event.cancelBubble = true

Кросбраузерну зупинити спливання можна так:

Код: event.stopPropagation. event.stopPropagation (). (Event.cancelBubble = true);

• При настанні події - елемент, на якому воно відбулося, позначається як «цільової» (event.target).
• Далі подія спочатку рухається вниз від кореня документа до event.target, по шляху викликаючи обробники, поставлені через addEventListener (. True).
• Далі подія рухається від event.target вгору до кореня документа, по шляху викликаючи обробники, поставлені через on * і addEventListener (. False).

• event.target - найглибший елемент, на якому відбулася подія.
• event.currentTarget (= this) - елемент, на якому в даний момент спрацював обробник (до якого «допливло» подія).
• event.eventPhase - на якій фазі він спрацював (занурення = 1, спливання = 3).

Схожі статті

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

• Javascript - спливання події, ит шеф

• Перехоплення події php через jquery