From 2783a468869e5960ab954ade6b575176bbc91a49 Mon Sep 17 00:00:00 2001
From: Starrier <1342878298@qq.com>
Date: Thu, 19 Jul 2018 10:37:40 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E7=BF=BB=E8=AF=91=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../02-bubbling-and-capturing/article.md      | 160 +++++++++---------
 1 file changed, 80 insertions(+), 80 deletions(-)

diff --git a/2-ui/2-events/02-bubbling-and-capturing/article.md b/2-ui/2-events/02-bubbling-and-capturing/article.md
index bc5d70dc1b..41366e50f7 100644
--- a/2-ui/2-events/02-bubbling-and-capturing/article.md
+++ b/2-ui/2-events/02-bubbling-and-capturing/article.md
@@ -1,8 +1,8 @@
-# Bubbling and capturing
+# 冒泡和捕获
 
-Let's start with an example.
+我们先看一个示例。
 
-This handler is assigned to `<div>`, but also runs if you click any nested tag like `<em>` or `<code>`:
+这个处理器被分配给 `<div>`，但是如果你单击像 `<em>` 或者 `<code>` 这样的嵌套标签也是可以运行的：
 
 ```html autorun height=60
 <div onclick="alert('The handler!')">
@@ -10,15 +10,15 @@ This handler is assigned to `<div>`, but also runs if you click any nested tag l
 </div>
 ```
 
-Isn't it a bit strange? Why the handler on `<div>` runs if the actual click was on `<em>`?
+这很奇怪不是么？为什么实际上是单击 `<em>`，而 `<div>` 上的处理器会运行？
 
-## Bubbling
+## 冒泡
 
-The bubbling principle is simple.
+冒泡原理很简单。
 
-**When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.**
+**当事件发生元素上时，它首先会本身上运行处理器，然后会在父元素行运行，然后是其他的祖先**。
 
-Let's say, we have 3 nested elements `FORM > DIV > P` with a handler on each of them:
+比如我们有 3 层嵌套 `FORM > DIV > P`，它们都各自拥有一个处理器：
 
 ```html run autorun
 <style>
@@ -35,57 +35,57 @@ Let's say, we have 3 nested elements `FORM > DIV > P` with a handler on each of
 </form>
 ```
 
-A click on the inner `<p>` first runs `onclick`:
-1. On that `<p>`.
-2. Then on the outer `<div>`.
-3. Then on the outer `<form>`.
-4. And so on upwards till the `document` object.
+单击内部 `<p>` 会首先运行 `onclick`：
+1. 在 `<p>` 上。
+2. 然后是外部的 `<div>`。
+3. 然后是外部的 `<form>`.
+4. 等等，直到最后的 `document` 对象。
 
 ![](event-order-bubbling.png)
 
-So if we click on `<p>`, then we'll see 3 alerts: `p` -> `div` -> `form`.
+因此，如果我们单击 `<p>`，那么我们将看到 3 个警告： `p` -> `div` -> `form`。
 
-The process is called "bubbling", because events "bubble" from the inner element up through parents like a bubble in the water.
+这个过程被称为“冒泡”，因为事件“冒泡”从内部元素向上时，会经过父节点，就像水里的气泡一样。
 
 ```warn header="*Almost* all events bubble."
-The key word in this phrase is "almost".
+这个短语的关键词是“几乎”。
 
-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.
+例如，“焦点”事件不会冒泡。还有其他示例。我们会遇到的。但是这是例外，而不是规则，因为大多数事件都是冒泡的。
 ```
 
 ## event.target
 
-A handler on a parent element can always get the details about where it actually happened.
+父元素上的处理器总是可以获取实际上发生的详细信息。
 
-**The most deeply nested element that caused the event is called a *target* element, accessible as `event.target`.**
+**导致事件深层嵌套的元素是 *target* 元素,可通过 `event.target` 访问。**
 
-Note the differences from `this` (=`event.currentTarget`):
+注意与 `this` (=`event.currentTarget`) 之间的区别：
 
-- `event.target` -- is the "target" element that initiated the event, it doesn't change through the bubbling process.
-- `this` -- is the "current" element, the one that has a currently running handler on it.
+- `event.target` —— 是 "target" 元素的初始化事件，它不会在冒泡过程中发生变化。
+- `this` —— 是 "current" 元素，其中有一个当前正在运行的处理器。
 
-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.
+例如，如果我们有一个 `form.onclick` 处理器，那么它可以从表单 "catch" 所有的点击。无论点击发生在哪里，它都会冒泡到 `<form>` 然后运行处理器。
 
-In `form.onclick` handler:
+`form.onclick` 处理器：
 
-- `this` (`=event.currentTarget`) is the `<form>` element, because the handler runs on it.
-- `event.target` is the concrete element inside the form that actually was clicked.
+- `this` (`=event.currentTarget`) 是 `<form>` 元素，因为处理器在它上面运行。
+- `event.target` 是表单中实际上被单击的元素。
 
-Check it out:
+检查：
 
 [codetabs height=220 src="bubble-target"]
 
-It's possible that `event.target` equals `this` -- when the click is made directly on the `<form>` element.
+`event.target` 可能会等于 `this` —— 当单击事件发生在 `<form>` 元素上时。
 
-## Stopping bubbling
+## 停止冒泡
 
-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.
+冒泡事件直接从目标元素开始。通常情况下，它向上上升到 `<html>`，然后再到 `document` 对象，一些事件甚至到达了 `window`，调用路径上的所有处理程序。
 
-But any handler may decide that the event has been fully processed and stop the bubbling.
+但是任何处理器都可以决定事件已经被完全处理，然后停止冒泡。
 
-The method for it is `event.stopPropagation()`.
+方法是 `event.stopPropagation()`。
 
-For instance, here `body.onclick` doesn't work if you click on `<button>`:
+例如，如果你单击 `<button>` 这里的 `body.onclick` 不会起作用：
 
 ```html run autorun height=60
 <body onclick="alert(`the bubbling doesn't reach here`)">
@@ -94,60 +94,60 @@ For instance, here `body.onclick` doesn't work if you click on `<button>`:
 ```
 
 ```smart header="event.stopImmediatePropagation()"
-If an element has multiple event handlers on a single event, then even if one of them stops the bubbling, the other ones still execute.
+如果元素在事件上有多个处理器，那么即使其中一个事件处理器停止冒泡，其他处理器也会继续执行。
 
-In other words, `event.stopPropagation()` stops the move upwards, but on the current element all other handlers will run.
+换句话说，`event.stopPropagation()` 停止向上移动，但是当前元素上的其他处理器都会继续运行。
 
-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.
+为了停止事件冒泡并阻止当前元素上的处理器运行，有一个 `event.stopImmediatePropagation()` 方法。使用之后，就不会有其他处理器会被执行。
 ```
 
 ```warn header="Don't stop bubbling without a need!"
-Bubbling is convenient. Don't stop it without a real need: obvious and architecturally well-thought.
+冒泡很方便。不要在没有真正需求的时候阻止它：显而易见的，或者是在架构上经过深思熟虑后。
 
-Sometimes `event.stopPropagation()` creates hidden pitfalls that later may become problems.
+有时 `event.stopPropagation()` 会产生隐藏的陷阱，这可能会成为以后的问题。
 
-For instance:
+例如：
 
-1. We create a nested menu. Each submenu handles clicks on its elements and calls `stopPropagation` so that outer menu don'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".
+1. 我们创建一个嵌套目录，每个子目录各自处理对自己的单击事件，并调用 `stopPropagation`，这样外层目录就不会被触发。
+2. 之后我们决定去捕获在整个窗口上的点击，来追踪用户的行为（用户点击了哪里）。有些分析系统会这样做。通常代码会使用 `document.addEventListener('click'…)` 来捕获所有的点击。
+3. 我们的分析不适用于点击被 `stopPropagation` 所阻止的区域。我们有一个 "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.
+通常没有必要去阻止冒泡的产生。看似需要的任务，可以通过其他方法解决。其中之一就是使用自定义事件，我们稍后会进行讨论。此外，我们还可以将数据写入一个处理器中的 `event` 对象，并在另一个处理器中读取它，这样我们就可以向父处理器传递有关下层处理器的信息。
 ```
 
 
-## Capturing
+## 捕获
 
-There's another phase of event processing called "capturing". It is rarely used in real code, but sometimes can be useful.
+还有另一阶段的事件过程称为“捕获”。它在代码中很少被使用，但是有时是有用的。
 
-The standard [DOM Events](http://www.w3.org/TR/DOM-Level-3-Events/) describes 3 phases of event propagation:
+[DOM 事件](http://www.w3.org/TR/DOM-Level-3-Events/)标准描述了事件传播的 3 个阶段：
 
-1. Capturing phase -- the event goes down to the element.
-2. Target phase -- the event reached the target element.
-3. Bubbling phase -- the event bubbles up from the element.
+1. 捕获阶段 —— 事件延伸到元素上。
+2. 目标阶段 —— 事件到达目标元素。
+3. 冒泡阶段 —— 事件从元素上开始冒泡。
 
-Here's the picture of a click on `<td>` inside a table, taken from the specification:
+下面是在表格中单击 `<td>` 的图片，取自规范：
 
 ![](eventflow.png)
 
-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.
+即：对于 `<td>` 的单击，事件首先通过祖先链向下传递到元素（捕获），然后到达目标，最后上升（冒泡），在途中调用处理器。
 
-**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.
+处理器 `on<event>` 属性或使用 HTML 属性或者使用 `addEventListener(event, handler)` 添加的处理器，不知道捕获，它们只知道第 2 和第 3 阶段。
 
-To catch an event on the capturing phase, we need to set the 3rd argument of `addEventListener` to `true`.
+要在捕获阶段捕获事件，我们需要将 `addEventListener` 的第三个参数设置为 `true`。
 
-There are two possible values for that optional last argument:
+这个可选的最后一个参数有两个可能的值：
 
-- If it's `false` (default), then the handler is set on the bubbling phase.
-- If it's `true`, then the handler is set on the capturing phase.
+- 如果为 `false`（默认值），则在冒泡阶段设置处理器。
+- 如果为 `true`，则在捕获阶段设置处理器。
 
-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.
+注意，虽然形式上有 3 个阶段，但第 2 阶段（“target 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.
+如果将捕获阶段和冒泡阶段处理器放在目标上，捕获阶段处理器将在捕获阶段触发，而冒泡处理器将首先在冒泡阶段被触发。
 
-Let's see it in action:
+我们看一下效果：
 
 ```html run autorun height=140 edit
 <style>
@@ -171,37 +171,37 @@ Let's see it in action:
 </script>
 ```
 
-The code sets click handlers on *every* element in the document to see which ones are working.
+代码集单击文档中的**每个**元素上的处理器，来查看哪些元素正在工作。
 
-If you click on `<p>`, then the sequence is:
+如果你点击了 `<p>`，那么顺序是：
 
-1. `HTML` -> `BODY` -> `FORM` -> `DIV` -> `P` (capturing phase, the first listener), and then:
-2. `P` -> `DIV` -> `FORM` -> `BODY` -> `HTML` (bubbling phase, the second listener).
+1. `HTML` -> `BODY` -> `FORM` -> `DIV` -> `P`（捕获阶段，第一个监听者），然后：
+2. `P` -> `DIV` -> `FORM` -> `BODY` -> `HTML` （冒泡阶段，第二个监听者）。
 
-Please note that `P` shows up two times: at the end of capturing and at the start of bubbling.
+请注意，`P` 出现了两次：在捕获结束和开始冒泡时。
 
-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.
+有一个 `event.eventPhase` 属性，它告诉我们事件被捕获阶段的数量。但它很少使用，因为我们通常在处理器中了解到它。
 
-## Summary
+## 总结
 
-The event handling process:
+事件处理过程：
 
-- When an event happens -- the most nested element where it happens gets labeled as the "target element" (`event.target`).
-- Then the event first moves from the document root down the `event.target`, calling handlers assigned with `addEventListener(...., true)` on the way.
-- 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`.
+- 当事件发生时 —— 嵌套最深的那个元素被标记为 "target element" (`event.target`)。
+- 然后事件首先从文档根向下移动到 `event.target`，过程中调用分配给 `addEventListener(...., true)` 的处理器。
+- 然后事件从 `event.target` 向上移动到根，调用使用 `on<event>` 和 `addEventListener` 分配的处理器，不使用第三个参数或第三个参数设置为 `false`。
 
-Each handler can access `event` object properties:
+每个处理器都可以访问 `event` 对象属性：
 
-- `event.target` -- the deepest element that originated the event.
-- `event.currentTarget` (=`this`) -- the current element that handles the event (the one that has the handler on it)
-- `event.eventPhase` -- the current phase (capturing=1, bubbling=3).
+- `event.target` —— 事件最深的元素。
+- `event.currentTarget` (=`this`) —— 处理事件的当前元素（有处理器在其上运行的）
+- `event.eventPhase` —— 当前阶段（capturing=1, bubbling=3）。
 
-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.
+任何事件处理器都可以通过调用 `event.stopPropagation()` 来停止事件，但不建议如此，因为我们不确定是否后续会使用冒泡上来的事件，也许是完全不同的事情。
 
-The capturing phase is used very rarely, usually we handle events on bubbling. And there's a logic behind that.
+捕获阶段很少使用，我们通常处理冒泡事件。这背后有一个逻辑。
 
-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.
+事件处理却也是如此。在特定元素上设置处理器的代码知道元素的最大细节以及它所做的事情。特定 `<td>` 上的处理器可能恰好适合于 `<td>`，它知道关于它的一切。所以它应该首先获得机会。然后，它的直系父节点也会获取上下文，但是会少一些，等等。知道处理一般概念并运行最后一个上面的元素。
 
-Bubbling and capturing lay the foundation for "event delegation" -- an extremely powerful event handling pattern that we study in the next chapter.
+冒泡和捕获为“事件委托”奠定了基础 —— 我们将在下一章中研究非常强大的事件处理模式。

From 538a9ca8724a5219d17b986954c258a7e58d51ae Mon Sep 17 00:00:00 2001
From: Starrier <1342878298@qq.com>
Date: Tue, 31 Jul 2018 22:34:06 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E6=A0=A1=E5=AF=B9=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../02-bubbling-and-capturing/article.md      | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/2-ui/2-events/02-bubbling-and-capturing/article.md b/2-ui/2-events/02-bubbling-and-capturing/article.md
index 41366e50f7..5d91bd37c5 100644
--- a/2-ui/2-events/02-bubbling-and-capturing/article.md
+++ b/2-ui/2-events/02-bubbling-and-capturing/article.md
@@ -16,7 +16,7 @@
 
 冒泡原理很简单。
 
-**当事件发生元素上时，它首先会本身上运行处理器，然后会在父元素行运行，然后是其他的祖先**。
+**当事件发生在元素上，它首先会运行元素本身的处理器，然后运行父元素上的，再然后是其他祖先上的**。
 
 比如我们有 3 层嵌套 `FORM > DIV > P`，它们都各自拥有一个处理器：
 
@@ -38,8 +38,8 @@
 单击内部 `<p>` 会首先运行 `onclick`：
 1. 在 `<p>` 上。
 2. 然后是外部的 `<div>`。
-3. 然后是外部的 `<form>`.
-4. 等等，直到最后的 `document` 对象。
+3. 再然后是外部的 `<form>`。
+4. 以此类推，直到最后的 `document` 对象。
 
 ![](event-order-bubbling.png)
 
@@ -50,21 +50,21 @@
 ```warn header="*Almost* all events bubble."
 这个短语的关键词是“几乎”。
 
-例如，“焦点”事件不会冒泡。还有其他示例。我们会遇到的。但是这是例外，而不是规则，因为大多数事件都是冒泡的。
+例如，`focus` 事件不会冒泡。同样，我们以后还会遇到其他例子。但是这是例外，而不是规则，因为大多数事件都是冒泡的。
 ```
 
 ## event.target
 
-父元素上的处理器总是可以获取实际上发生的详细信息。
+父元素上的处理器总是可以获取事件实际发生位置的详细信息。
 
-**导致事件深层嵌套的元素是 *target* 元素,可通过 `event.target` 访问。**
+**引发事件的那个嵌套层级最深的元素被称为目标元素,可通过 `event.target` 访问。**
 
 注意与 `this` (=`event.currentTarget`) 之间的区别：
 
-- `event.target` —— 是 "target" 元素的初始化事件，它不会在冒泡过程中发生变化。
+- `event.target` ——  是引发事件的目标元素，它不会在冒泡过程中发生变化。。
 - `this` —— 是 "current" 元素，其中有一个当前正在运行的处理器。
 
-例如，如果我们有一个 `form.onclick` 处理器，那么它可以从表单 "catch" 所有的点击。无论点击发生在哪里，它都会冒泡到 `<form>` 然后运行处理器。
+例如，如果我们有一个 `form.onclick` 处理器，那么它可以“抓”到所有表单内部元素上的点击事件。无论点击发生在哪里，它都会冒泡到 `<form>` 然后运行处理器。
 
 `form.onclick` 处理器：
 
@@ -79,7 +79,7 @@
 
 ## 停止冒泡
 
-冒泡事件直接从目标元素开始。通常情况下，它向上上升到 `<html>`，然后再到 `document` 对象，一些事件甚至到达了 `window`，调用路径上的所有处理程序。
+冒泡事件从目标元素开始向上冒泡。通常情况下，它向上上升到 `<html>`，然后再到 `document` 对象，一些事件甚至到达了 `window`，它们会调用路径上的所有处理器。
 
 但是任何处理器都可以决定事件已经被完全处理，然后停止冒泡。
 
@@ -122,7 +122,7 @@
 
 [DOM 事件](http://www.w3.org/TR/DOM-Level-3-Events/)标准描述了事件传播的 3 个阶段：
 
-1. 捕获阶段 —— 事件延伸到元素上。
+1. 捕获阶段 —— 事件（从 Window）向下到达元素上。
 2. 目标阶段 —— 事件到达目标元素。
 3. 冒泡阶段 —— 事件从元素上开始冒泡。
 
@@ -138,12 +138,12 @@
 
 要在捕获阶段捕获事件，我们需要将 `addEventListener` 的第三个参数设置为 `true`。
 
-这个可选的最后一个参数有两个可能的值：
+最后一个参数是可选的，有两个可能的值：
 
 - 如果为 `false`（默认值），则在冒泡阶段设置处理器。
 - 如果为 `true`，则在捕获阶段设置处理器。
 
-注意，虽然形式上有 3 个阶段，但第 2 阶段（“target phase”：事件到达元素）没有单独被处理：捕获阶段和冒泡阶段的处理器在该阶段被触发。
+注意，虽然形式上有 3 个阶段，但第 2 阶段（“目标阶段”：事件到达元素）没有单独被处理：捕获阶段和冒泡阶段的处理器在该阶段都会被触发。
 
 如果将捕获阶段和冒泡阶段处理器放在目标上，捕获阶段处理器将在捕获阶段触发，而冒泡处理器将首先在冒泡阶段被触发。
 
@@ -171,7 +171,7 @@
 </script>
 ```
 
-代码集单击文档中的**每个**元素上的处理器，来查看哪些元素正在工作。
+代码为文档中的**每个**元素设置点击处理程序，以查看哪些元素上的点击事件处理器生效了。
 
 如果你点击了 `<p>`，那么顺序是：
 
@@ -186,9 +186,9 @@
 
 事件处理过程：
 
-- 当事件发生时 —— 嵌套最深的那个元素被标记为 "target element" (`event.target`)。
-- 然后事件首先从文档根向下移动到 `event.target`，过程中调用分配给 `addEventListener(...., true)` 的处理器。
-- 然后事件从 `event.target` 向上移动到根，调用使用 `on<event>` 和 `addEventListener` 分配的处理器，不使用第三个参数或第三个参数设置为 `false`。
+- 当事件发生时 —— 嵌套最深的那个元素被标记为“目标事件”(`event.target`)。
+- 然后事件先从文档根节点向下移动到 `event.target`，过程中调用分配给 `addEventListener(...., true)` 的处理器。
+- 再然后事件从 `event.target` 向上移动到根，调用使用 `on<event>` 和 `addEventListener` 分配的处理器，不使用第三个参数或第三个参数设置为 `false`。
 
 每个处理器都可以访问 `event` 对象属性：
 
@@ -202,6 +202,6 @@
 
 现实世界中，当事故发生时，当地警方第一时间作出反应。他们最了解发生这件事的地方。如果需要更高级别的权威。那么就会向上申请。
 
-事件处理却也是如此。在特定元素上设置处理器的代码知道元素的最大细节以及它所做的事情。特定 `<td>` 上的处理器可能恰好适合于 `<td>`，它知道关于它的一切。所以它应该首先获得机会。然后，它的直系父节点也会获取上下文，但是会少一些，等等。知道处理一般概念并运行最后一个上面的元素。
+事件处理却也是如此。在特定元素上设置处理器的代码了解该元素最详尽的信息。特定 `<td>` 上的处理器可能恰好适合于 `<td>`，它知道关于它的一切。所以它应该首先获得机会。然后，它的直系父节点也会获取上下文，但是会少一些，以此类推。而最顶层的元素最后才获取到信息，且只能了解到大致的情况。
 
 冒泡和捕获为“事件委托”奠定了基础 —— 我们将在下一章中研究非常强大的事件处理模式。

From d325c197ccfa92e4f35971dac7d509c0f0522ffb Mon Sep 17 00:00:00 2001
From: Starrier <1342878298@qq.com>
Date: Tue, 31 Jul 2018 22:42:13 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E8=AF=AD=E5=8F=A5=E9=A1=BA=E5=BA=8F?=
 =?UTF-8?q?=E7=AD=89=E9=83=A8=E5=88=86=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 2-ui/2-events/02-bubbling-and-capturing/article.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/2-ui/2-events/02-bubbling-and-capturing/article.md b/2-ui/2-events/02-bubbling-and-capturing/article.md
index 5d91bd37c5..ad1c47250b 100644
--- a/2-ui/2-events/02-bubbling-and-capturing/article.md
+++ b/2-ui/2-events/02-bubbling-and-capturing/article.md
@@ -61,7 +61,7 @@
 
 注意与 `this` (=`event.currentTarget`) 之间的区别：
 
-- `event.target` ——  是引发事件的目标元素，它不会在冒泡过程中发生变化。。
+- `event.target` ——  是引发事件的目标元素，它在冒泡过程中不会发生变化。。
 - `this` —— 是 "current" 元素，其中有一个当前正在运行的处理器。
 
 例如，如果我们有一个 `form.onclick` 处理器，那么它可以“抓”到所有表单内部元素上的点击事件。无论点击发生在哪里，它都会冒泡到 `<form>` 然后运行处理器。
@@ -85,7 +85,7 @@
 
 方法是 `event.stopPropagation()`。
 
-例如，如果你单击 `<button>` 这里的 `body.onclick` 不会起作用：
+例如，如果你单击 `<button>` 这里的 `body.onclick` 是无效的：
 
 ```html run autorun height=60
 <body onclick="alert(`the bubbling doesn't reach here`)">
@@ -98,11 +98,11 @@
 
 换句话说，`event.stopPropagation()` 停止向上移动，但是当前元素上的其他处理器都会继续运行。
 
-为了停止事件冒泡并阻止当前元素上的处理器运行，有一个 `event.stopImmediatePropagation()` 方法。使用之后，就不会有其他处理器会被执行。
+为了停止事件冒泡并阻止当前元素上的处理器运行，有一个 `event.stopImmediatePropagation()` 方法。使用之后，其他处理器就不会被执行。
 ```
 
 ```warn header="Don't stop bubbling without a need!"
-冒泡很方便。不要在没有真正需求的时候阻止它：显而易见的，或者是在架构上经过深思熟虑后。
+冒泡很方便。不要在没有真正需求的时候阻止它：除非是显而易见的，或者是在架构上经过深思熟虑后。
 
 有时 `event.stopPropagation()` 会产生隐藏的陷阱，这可能会成为以后的问题。
 
@@ -171,7 +171,7 @@
 </script>
 ```
 
-代码为文档中的**每个**元素设置点击处理程序，以查看哪些元素上的点击事件处理器生效了。
+代码为文档中的**每个**元素设置点击处理器，以查看哪些元素上的点击事件处理器生效了。
 
 如果你点击了 `<p>`，那么顺序是：
 

From c14f547897a55fdc8a47b4182fdcf810ea979c8c Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Fri, 10 Aug 2018 19:39:00 +0800
Subject: [PATCH 4/4] Update article.md

---
 2-ui/2-events/02-bubbling-and-capturing/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/2-events/02-bubbling-and-capturing/article.md b/2-ui/2-events/02-bubbling-and-capturing/article.md
index ad1c47250b..d0235ea534 100644
--- a/2-ui/2-events/02-bubbling-and-capturing/article.md
+++ b/2-ui/2-events/02-bubbling-and-capturing/article.md
@@ -176,7 +176,7 @@
 如果你点击了 `<p>`，那么顺序是：
 
 1. `HTML` -> `BODY` -> `FORM` -> `DIV` -> `P`（捕获阶段，第一个监听者），然后：
-2. `P` -> `DIV` -> `FORM` -> `BODY` -> `HTML` （冒泡阶段，第二个监听者）。
+2. `P` -> `DIV` -> `FORM` -> `BODY` -> `HTML`（冒泡阶段，第二个监听者）。
 
 请注意，`P` 出现了两次：在捕获结束和开始冒泡时。