You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/2-events/02-bubbling-and-capturing/article.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -140,10 +140,10 @@ To catch an event on the capturing phase, we need to set the 3rd argument of `ad
140
140
141
141
Actually, there are two possible values for that optional last argument:
142
142
143
-
- If it's `false` (default), then the handler is set on the bubbling phrase.
144
-
- If it's `true`, then the handler is set on the capturing phrase.
143
+
- If it's `false` (default), then the handler is set on the bubbling phase.
144
+
- If it's `true`, then the handler is set on the capturing phase.
145
145
146
-
Note that while formally there are 3 phrases, the 2nd phrase ("target phase": the event reached the element) is not handled separately: handlers on both capturing and bubbling phrases trigger at that phase.
146
+
Note that while formally there are 3 phases, the 2nd phase ("target phase": the event reached the element) is not handled separately: handlers on both capturing and bubbling phases trigger at that phase.
147
147
148
148
Handlers on the target element trigger last on the capturing state, and then trigger first on the bubbling stage.
149
149
@@ -175,12 +175,12 @@ The code sets click handlers on *every* element in the document to see which one
175
175
176
176
If you click on `<td>`, then the sequence is:
177
177
178
-
1.`HTML` -> `BODY` -> `FORM` -> `DIV` -> `P` (capturing phrase, the first listener), and then:
179
-
2.`P` -> `DIV` -> `FORM` -> `BODY` -> `HTML` (bubbling phrase, the second listener).
178
+
1.`HTML` -> `BODY` -> `FORM` -> `DIV` -> `P` (capturing phase, the first listener), and then:
179
+
2.`P` -> `DIV` -> `FORM` -> `BODY` -> `HTML` (bubbling phase, the second listener).
180
180
181
181
Please note that `P` shows up two times: at the end of capturing and at the start of bubbling.
182
182
183
-
There's a property `event.eventPhrase` that tells us the number of the phrase on which the event was caught. But it's rarely used, because we usually know it in the handler.
183
+
There's a property `event.eventPhase` that tells us the number of the phase on which the event was caught. But it's rarely used, because we usually know it in the handler.
184
184
185
185
## Summary
186
186
@@ -198,7 +198,7 @@ Each handler can access `event` object properties:
198
198
199
199
Any event handler can stop the event by calling `event.stopPropagation()`, but that's not recommended, because we can't really be sure we won't need it above, maybe for completely different things.
200
200
201
-
The capturing phrase is used very rarely, usually we handle events on bubbling. And there's a logic behind that.
201
+
The capturing phase is used very rarely, usually we handle events on bubbling. And there's a logic behind that.
202
202
203
203
In real world, when an accident happens, local authorities react first. They know best the area where it happened. Then higher-level authorities if needed.
0 commit comments