This commit is contained in:
Ilya Kantor 2019-08-05 22:39:38 +03:00
parent a6a0031199
commit 500b7c9ece
4 changed files with 14 additions and 14 deletions

View file

@ -110,7 +110,7 @@ For instance:
1. We create a nested menu. Each submenu handles clicks on its elements and calls `stopPropagation` so that the outer menu won't trigger.
2. Later we decide to catch clicks on the whole window, to track users' behavior (where people click). Some analytic systems do that. Usually the code uses `document.addEventListener('click'…)` to catch all clicks.
3. Our analytic won't work over the area where clicks are stopped by `stopPropagation`. We've got a "dead zone".
3. Our analytic won't work over the area where clicks are stopped by `stopPropagation`. Sadly, we've got a "dead zone".
There's usually no real need to prevent the bubbling. A task that seemingly requires that may be solved by other means. One of them is to use custom events, we'll cover them later. Also we can write our data into the `event` object in one handler and read it in another one, so we can pass to handlers on parents information about the processing below.
```
@ -134,7 +134,7 @@ That is: for a click on `<td>` the event first goes through the ancestors chain
**Before we only talked about bubbling, because the capturing phase is rarely used. Normally it is invisible to us.**
Handlers added using `on<event>`-property or using HTML attributes or using `addEventListener(event, handler)` don't know anything about capturing, they only run on the 2nd and 3rd phases.
Handlers added using `on<event>`-property or using HTML attributes or using two-argument `addEventListener(event, handler)` don't know anything about capturing, they only run on the 2nd and 3rd phases.
To catch an event on the capturing phase, we need to set the handler `capture` option to `true`:

View file

@ -131,7 +131,7 @@
<path d="M482.015924,458.014925 L482.015924,477.891045" id="tr_2_td_2-text" fill="#000000"></path>
</g>
<g id="event-flow" transform="translate(103.700637, 14.691045)">
<g id="target_phase" transform="translate(186.277070, 443.323881)">
<g id="target_phase" transform="translate(180.277070, 443.323881)">
<text id="Target" fill="#0000FF" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="0.960191083" y="34.1477612">Target</tspan>
</text>
@ -141,7 +141,7 @@
<text id="(2)" fill="#0000FF" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="15.8431529" y="68.7149254">(2)</tspan>
</text>
<rect id="Rectangle-path" stroke="#000000" stroke-width="5" x="69.133758" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<rect id="Rectangle-path" stroke="#000000" stroke-width="5" x="75.133758" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
</g>
<g id="capture_phase">
<text id="Capture" fill="#FF0000" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Before After
Before After