Просунута робота з об’єктом event на javascript, трепачёв дмитрий

• урок №
  Практика
  на відпрацювання циклів і функцій

Робота з DOM

Деякі просунуті речі

бібліотека jQuery

• урок №
  Підручник
  jQuery для новачків
• урок №
  основи
  роботи з jQuery
• урок №
  маніпулювання
  елементами сторінки
• урок №
  Робота
  з набором елементів
• урок №
  Робота
  з подіями jQuery
• урок №
  Ефекти і анімація
  бібліотеки jQuery
• урок №
  Практика на відпрацювання
  бібліотеки jQuery
• урок №
  Робота з
  бібліотекою jQueryUI
• урок №
  Популярні плагіни
  бібліотеки jQuery

• урок №
  Підручник
  за регулярними виразами
• урок №
  Робота з регулярними
  виразами. Глава 1.
• урок №
  Робота з регулярними
  виразами. Глава 2.
• урок №
  Робота з регулярними
  виразами. Глава 3.
• урок №
  Робота з регулярними
  виразами. Глава 4.
• урок №
  відмінності
  від PHP версії

Робота з кинувся

• урок №
  Підручник
  по роботі з canvas
• урок №
  основи
  роботи з canvas
• урок №
  просунута
  робота з canvas

занурення

Крім спливання подій є ще і занурення (по науковому стадія перехоплення). Це означає, що подія спочатку йде зверху вниз (стадія перехоплення), доходить до нашого елементу (стадія мети) і тільки потім починає спливати (стадія спливання).

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

Стадію, на якій сталася подія можна визначити за допомогою властивості event.eventPhase. Воно може набувати таких значень: 1 - стадія перехоплення, 2 - стадія мети, 3 - стадія спливання.

Вступ до делегування

Уявімо собі ситуацію: нехай у нас є ul з декількома li. До кожної li прив'язане таку обставину: після натискання на li їй в кінець додається '!'.

Давайте реалізуємо описане:

Нехай тепер у нас також є кнопочка, при натисканні на яку в кінець ul додається нова li з текстом 'пункт'. Нас чекає сюрприз: прив'язане подія не буде працювати для нових li! Переконаємося в цьому:

Натисніть на кнопочку для додавання li, а потім на цю нову li - вона не зреагує:

Для вирішення проблеми можна в момент створення нової li повісити на неї функцію addSign через addEventListener. Давайте реалізуємо це:

Натисніть на кнопочку для додавання li, а потім на цю нову li - вона зреагує:

Існує і другий спосіб обійти проблему - делегування подій. Давайте його розберемо.

делегування подій

Суть делегування в наступному: навіс подія не на кожну li, а на їх батьків - на ul.

При цьому працездатність нашого скрипта повинна зберегтися: як і раніше при кліці на li їй в кінець буде додаватися '!'. Тільки подія в новому варіанті буде навісили на ul:

Як ми це проверни: так як подія навісили на ul, то всередині функції ми можемо зловити li за допомогою event.target. Нагадаю, що таке event.target - це саме той тег, в якому стався клік, в нашому випадку це li.

Отже, ось рішення нашої задачі через делегування:

Результат виконання коду:

При цьому наше рішення буде працювати автоматично навіть для нових li. адже подія навішені нема на li, а на ul:

Натисніть на кнопочку для додавання li, а потім на цю нову li - вона зреагує:

Наш код робочий, проте не без недоліків. Давайте розберемо ці недоліки і напишемо більш універсальне рішення.

Універсальне делегування подій

Недолік нашого коду проявиться в тому випадку, коли всередині li будуть якісь вкладені теги. У нашому випадку нехай це будуть теги i.

В цьому випадку натискання на i призведе до додавання знаку оклику в кінець тега i. а не тега li. як ми хотіли б (якщо натиснути на li поза курсиву - то все буде ок):

Натисніть на курсив - ви побачите як '!' додасться йому в кінець (натискання поза курсиву буде працювати нормально):

Проблема виправляється таким чином (описаний спосіб не єдиний, але найпростіший): за допомогою методу closest знайдемо найближчу li, котоорая є батьком для event.target ось так: event.target.closest ( 'li').

Як це працює: якщо клік був на i. то в event.target лежить цей i, а в event.target.closest ( 'li') - наша li, для якої має спрацювати подія.

Якщо ж клік був на самій li. то і в event.target. і в event.target.closest ( 'li') буде лежати наша li.

Результат виконання коду:

Не важливо, яка глибина вкладеності: тег i може лежати в тезі b. а той в тезі span і тільки потім в li - це не має значення: конструкція event.target.closest ( 'li') знайде батька з будь-якого рівня вкладеності.

Додаткові матеріали

Що вам робити далі:

Приступайте до вирішення завдань за наступним посиланням: завдання до уроку.

Коли все вирішите - переходите до вивчення нової теми.

• урок №
  Практика
  на відпрацювання циклів і функцій

Робота з DOM

Деякі просунуті речі

бібліотека jQuery

• урок №
  Підручник
  jQuery для новачків
• урок №
  основи
  роботи з jQuery
• урок №
  маніпулювання
  елементами сторінки
• урок №
  Робота
  з набором елементів
• урок №
  Робота
  з подіями jQuery
• урок №
  Ефекти і анімація
  бібліотеки jQuery
• урок №
  Практика на відпрацювання
  бібліотеки jQuery
• урок №
  Робота з
  бібліотекою jQueryUI
• урок №
  Популярні плагіни
  бібліотеки jQuery

• урок №
  Підручник
  за регулярними виразами
• урок №
  Робота з регулярними
  виразами. Глава 1.
• урок №
  Робота з регулярними
  виразами. Глава 2.
• урок №
  Робота з регулярними
  виразами. Глава 3.
• урок №
  Робота з регулярними
  виразами. Глава 4.
• урок №
  відмінності
  від PHP версії

Робота з кинувся

• урок №
  Підручник
  по роботі з canvas
• урок №
  основи
  роботи з canvas
• урок №
  просунута
  робота з canvas