На цьому уроці ми познайомимося з таким поняттям як спливання події, а також розглянемо, як його можна перервати. Крім цього з'ясуємо, які ще етапи (фази) проходить подія, перед тим як почати спливати.
спливання події
Якщо у деякого елемента виникає подія, то воно починає "спливати", тобто виникає у батьків, потім у прародителя і т.д.
З цього випливає, що подія, яка згенерував певний елемент, можна перехопити за допомогою процесора на батьку, прабатьків і т.д.
Спливання події (бульбашки) продемонструємо на наступному прикладі:
Напишемо невеликий скрипт, за допомогою якого додамо обробник події "click" для всіх елементів сторінки, а також для об'єктів document і window.
Як перервати спливання події
Спливання події (бульбашки) можна перервати. В цьому випадку у вищих (батьківських) елементів, дана подія викликано не буде. Метод, який призначений для припинення спливання події (пузрька) називається stopPropagation ().
Наприклад, змінимо наш вищенаведений приклад таким чином, щоб подія не спливало вище body.
Безперечно спливання - це дуже зручно і архітектурно прозоро. Не припиняйте його без явної потреби.
Отримання елемента, який викликав обробник
Наприклад, виведемо в консоль id елемента, який викликав обробник події:
Для отримання поточного елемента також можна використовувати властивість currentTarget (event.currentTarget).
Етапи (фази) проходу події
Перед тим як події починає спливати (етап спливання), воно попередньо проходить ще 2 етапи:
- 1 етап - це етап занурення до елемента, згенерованого подія. Тобто на даному етапі відбувається рух зверху вниз, тобто від об'єкта window до елемента. Також даний етап ще називають етапом перехоплення.
- 2 етап - це етап досягнення мети, тобто елемента (об'єкта), згенерувати подія.
З урахуванням всіх етапів, які проходить подія, виходить наступна картина:
Змінимо сценарій вищенаведеного прикладу наступним чином:
Третій параметр методів addEventListener і removeEventListener визначає етап, на якому буде спіймано подія. Якщо даний параметр має значення true. то подія буде перехоплюватися на стадії занурення (перехоплення) події. А якщо параметр має значення false. то подія буде перехоплюватися на етапі спливання. Для обробки події на самій меті, можна використовувати метод addEventListener як зі значенням false. так і зі значенням true.
Отримання елемента, який згенерував подія
Для того щоб отримати цільовий елемент, тобто елемент, який згенерував подія, необхідно використовувати властивість target (event.target).
Розглянемо вищенаведений приклад, в якому змінимо вміст елемента script на наступне:
У цьому прикладі ми додали обробник події "click" для елемента body. Даний обробник буде виводити в консоль елемент, який викликав обробник і елемент, який згенерував подія.
Продемонструємо наш приклад, клікнувши лівою кнопкою миші в області, що належить елементу strong: