Skip to content

Bubbling and capturing #495

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tarasyyyk merged 15 commits into from
May 25, 2023
Merged

Bubbling and capturing #495

Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
eb6b2b1
Bubbling, translated => ukr lang
Neschadin May 24, 2023
673c87e
Update 2-ui/2-events/02-bubbling-and-capturing/article.md
Neschadin May 25, 2023
f0b0cdf
Update 2-ui/2-events/02-bubbling-and-capturing/article.md
Neschadin May 25, 2023
a30caaa
Update 2-ui/2-events/02-bubbling-and-capturing/article.md
Neschadin May 25, 2023
dc12da7
Update 2-ui/2-events/02-bubbling-and-capturing/article.md
Neschadin May 25, 2023
8a26081
Update 2-ui/2-events/02-bubbling-and-capturing/article.md
Neschadin May 25, 2023
bcd0c40
Update article.md
Neschadin May 25, 2023
dfbd4d4
Update article.md
Neschadin May 25, 2023
0630b9c
Update article.md
Neschadin May 25, 2023
f5bc77a
Update article.md
Neschadin May 25, 2023
dfda0a7
Apply suggestions from code review
tarasyyyk May 25, 2023
8ab6909
Update article.md
Neschadin May 25, 2023
bc9eb07
Update article.md
Neschadin May 25, 2023
0d29b15
Update article.md
Neschadin May 25, 2023
ff64f96
Update article.md
Neschadin May 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update article.md
  • Loading branch information
@Neschadin
Neschadin authored May 25, 2023
commit bcd0c40027ccc39f55d5e9cf8ab0df86f5a62ca8
4 changes: 0 additions & 4 deletions 2-ui/2-events/02-bubbling-and-capturing/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@

Чи не дивно? Чому виконується обробник на `<div>`, якщо фактичний клік був на `<em>`?


## Спливання
Comment thread
Neschadin marked this conversation as resolved.

Принцип Спливання простий.
Expand Down Expand Up @@ -54,7 +53,6 @@
Наприклад, подія `focus` не спливає. Є й інші приклади, ми з ними познайомимося. Але все ж таки це скоріше виняток, ніж правило, більшість подій саме спливають.
```


## event.target

Обробник батьківського елемента завжди може отримати детальну інформацію про те, де це насправді сталося.
Expand Down Expand Up @@ -118,7 +116,6 @@
Зазвичай немає справжньої потреби зупиняти бульбашковий механізм. Задачу, яка, здається, вимагає цього, можна вирішити іншими способами. Один з них - використання користувацьких подій (custom events), які ми розглянемо пізніше. Також ми можемо записати наші дані в об'єкт event в одному обробнику і прочитати їх в іншому, щоб передати інформацію про обробку нижче рівня батьківських обробників. Таким чином, ми можемо передавати батьківським обробникам інформацію про обробку, яка відбувається нижче.
```


## Занурення

Існує ще одна фаза обробки подій, яку називають "зануренням". Цей механізм рідко використовується у реальному коді, але іноді може бути корисним.
Expand Down Expand Up @@ -207,7 +204,6 @@ elem.addEventListener("click", e => alert(2));
Іншими словами, зазвичай подія спочатку занурюється ("занурення") і потім піднімається ("спливання"). Але якщо під час занурення викликати `event.stopPropagation()`, то подальша подорож події зупиниться і спливання не відбудеться.
```


## Підсумки

Коли відбувається подія, то найвкладеніший елемент, на якому вона відбувається, стає "елементом-ціллю" (`event.target`).
Expand Down