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
The process is called "bubbling", because events "bubble" from the inner element up through parents like a bubble in the water.
48
+
这个过程被称为“冒泡”，因为事件“冒泡”从内部元素向上时，会经过父节点，就像水里的气泡一样。
49
49
50
50
```warn header="*Almost* all events bubble."
51
-
The key word in this phrase is "almost".
51
+
这个短语的关键词是“几乎”。
52
52
53
-
For instance, a `focus` event does not bubble. There are other examples too, we'll meet them. But still it's an exception, rather than a rule, most events do bubble.
Note the differences from `this` (=`event.currentTarget`):
62
+
注意与 `this` (=`event.currentTarget`) 之间的区别：
63
63
64
-
-`event.target`-- is the "target" element that initiated the event, it doesn't change through the bubbling process.
65
-
-`this`-- is the "current" element, the one that has a currently running handler on it.
64
+
-`event.target`—— 是引发事件的目标元素，它在冒泡过程中不会发生变化。。
65
+
-`this`—— 是 "current" 元素，其中有一个当前正在运行的处理器。
66
66
67
-
For instance, if we have a single handler `form.onclick`, then it can "catch" all clicks inside the form. No matter where the click happened, it bubbles up to `<form>`and runs the handler.
A bubbling event goes from the target element straight up. Normally it goes upwards till `<html>`, and then to `document`object, and some events even reach `window`, calling all handlers on the path.
To stop the bubbling and prevent handlers on the current element from running, there's a method `event.stopImmediatePropagation()`. After it no other handlers execute.
1. We create a nested menu. Each submenu handles clicks on its elements and calls `stopPropagation` so that outer menu don't trigger.
112
-
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.
113
-
3. Our analytic won't work over the area where clicks are stopped by `stopPropagation`. 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.
1.Capturing phase -- the event goes down to the element.
126
-
2.Target phase -- the event reached the target element.
127
-
3.Bubbling phase -- the event bubbles up from the element.
125
+
1.捕获阶段 —— 事件（从 Window）向下到达元素上。
126
+
2.目标阶段 —— 事件到达目标元素。
127
+
3.冒泡阶段 —— 事件从元素上开始冒泡。
128
128
129
-
Here's the picture of a click on `<td>`inside a table, taken from the specification:
129
+
下面是在表格中单击 `<td>`的图片，取自规范：
130
130
131
131
132
132
133
-
That is: for a click on `<td>`the event first goes through the ancestors chain down to the element (capturing), then it reaches the target, and then it goes up (bubbles), calling handlers on its way.
**Before we only talked about bubbling, because the capturing phase is rarely used. Normally it is invisible to us.**
135
+
**我们之前只讨论了冒泡，因为捕获阶段很少被使用。通常情况下，它对我们不可见**。
136
136
137
-
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.
There are two possible values for that optional last argument:
141
+
最后一个参数是可选的，有两个可能的值：
142
142
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.
143
+
-如果为 `false`（默认值），则在冒泡阶段设置处理器。
144
+
-如果为 `true`，则在捕获阶段设置处理器。
145
145
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.
If one puts capturing and bubbling handlers on the target element, the capture handler triggers last in the capturing phase and the bubble handler triggers first in the bubbling phase.
Please note that `P`shows up two times: at the end of capturing and at the start of bubbling.
181
+
请注意，`P`出现了两次：在捕获结束和开始冒泡时。
182
182
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.
-When an event happens -- the most nested element where it happens gets labeled as the "target element" (`event.target`).
190
-
-Then the event first moves from the document root down the `event.target`, calling handlers assigned with `addEventListener(...., true)`on the way.
191
-
-Then the event moves from `event.target`up to the root, calling handlers assigned using `on<event>`and`addEventListener`without the 3rd argument or with the 3rd argument `false`.
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.
The capturing phase is used very rarely, usually we handle events on bubbling. And there's a logic behind that.
201
+
捕获阶段很少使用，我们通常处理冒泡事件。这背后有一个逻辑。
202
202
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.
The same for event handlers. The code that set the handler on a particular element knows maximum details about the element and what it does. A handler on a particular `<td>`may be suited for that exactly `<td>`, it knows everything about it, so it should get the chance first. Then its immediate parent also knows about the context, but a little bit less, and so on till the very top element that handles general concepts and runs the last.
0 commit comments