From bcc5791373c6b94415c8fd4fb83837da17c333de Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Sat, 28 Mar 2020 19:19:38 +0800
Subject: [PATCH 01/18] Update article.md

---
 .../article.md                                     | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
index eeaf467cfa..e1bf5835aa 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
@@ -1,24 +1,24 @@
-# 移动：mouseover/out，mouseenter/leave
+# 移动鼠标：mouseover/out，mouseenter/leave
 
-我们将深入研究鼠标在元素之间移动时所发生事件的更多细节。
+我们将深入研究鼠标在元素之间移动时发生的事件。
 
 ## Mouseover/mouseout，relatedTarget
 
-当鼠标指针出现在一个元素上时，`mouseover` 事件就会发生，而 `mouseout` 事件则发生在鼠标指针离开时。
+当鼠标指针移到某个元素上时，`mouseover` 事件就会发生，而当鼠标移出该元素时，`mouseout` 事件就会发生。
 
 ![](mouseover-mouseout.svg)
 
-这些事件很特别，因为它们有 `relatedTarget`。
+这些事件很特别，因为它们具有 `relatedTarget` 属性。此属性是对 `target` 的补充。当鼠标从一个元素离开并去往另一个元素时，其中一个元素就变成了 `target`，另一个就变成了 `relatedTarget`。
 
 对于 `mouseover`：
 
-- `event.target` —— 是鼠标经过的那个元素。
-- `event.relatedTarget` —— 是鼠标上一次经过的元素。
+- `event.target` —— 是鼠标移过的那个元素。
+- `event.relatedTarget` —— 是鼠标来自的那个元素（`relatedTarget` -> `target`）。
 
 `mouseout` 则与之相反：
 
 - `event.target` —— 是鼠标离开的元素。
-- `event.relatedTarget` —— 是当前指针位置下的（鼠标进入的）元素。
+- `event.relatedTarget` —— 是鼠标移动到的，当前指针位置下的元素（`target` -> `relatedTarget`）。
 
 ```online
 在下面示例中，每个特性都是一个元素。当你移动鼠标时你可以看到文本区域的鼠标事件。

From faa2971598417ae9234d38c97e693f6d79079de2 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Sat, 28 Mar 2020 20:43:39 +0800
Subject: [PATCH 02/18] Update article.md

---
 2-ui/2-events/01-introduction-browser-events/article.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/article.md b/2-ui/2-events/01-introduction-browser-events/article.md
index eb6bf3b15b..260359af43 100644
--- a/2-ui/2-events/01-introduction-browser-events/article.md
+++ b/2-ui/2-events/01-introduction-browser-events/article.md
@@ -7,7 +7,7 @@
 **鼠标事件：**
 - `click` —— 当鼠标点击一个元素时（触摸屏设备会在点击时生成）。
 - `contextmenu` —— 当鼠标右键点击一个元素时。
-- `mouseover` / `mouseout` —— 当鼠标光标移入/离开一个元素时。
+- `mouseover` / `mouseout` —— 当鼠标指针移入/离开一个元素时。
 - `mousedown` / `mouseup` —— 当在元素上按下/释放鼠标按钮时。
 - `mousemove` —— 当鼠标移动时。
 
@@ -311,7 +311,7 @@ document.addEventListener("DOMContentLoaded", function() {
 
 ## 事件对象
 
-为了正确处理事件，我们需要更深入地了解发生了什么。不仅仅是 "click" 或 "keypress"，还包括鼠标光标的坐标是什么？按下了哪个键？等等。
+为了正确处理事件，我们需要更深入地了解发生了什么。不仅仅是 "click" 或 "keypress"，还包括鼠标指针的坐标是什么？按下了哪个键？等等。
 
 当事件发生时，浏览器会创建一个 **`event` 对象**，将详细信息放入其中，并将其作为参数传递给处理程序。
 
@@ -338,7 +338,7 @@ document.addEventListener("DOMContentLoaded", function() {
 : 处理事件的元素。这与 `this` 相同，除非处理程序是一个箭头函数，或者它的 `this` 被绑定到了其他东西上，之后我们就可以从 `event.currentTarget` 获取元素了。
 
 `event.clientX / event.clientY`
-: 鼠标事件的光标的窗口相对坐标。
+: 鼠标事件的指针的窗口相对坐标。
 
 还有很多属性。它们取决于事件类型，因此，稍后我们将详细讨论不同事件，那时我们再对其进行详细研究。
 

From 339b2b4e3953137da49d7ed4e0cf10e3abddcfff Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Sat, 28 Mar 2020 20:58:43 +0800
Subject: [PATCH 03/18] Update article.md

---
 .../article.md                                | 42 +++++++++----------
 1 file changed, 19 insertions(+), 23 deletions(-)

diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
index e1bf5835aa..8f803904d0 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
@@ -21,9 +21,9 @@
 - `event.relatedTarget` —— 是鼠标移动到的，当前指针位置下的元素（`target` -> `relatedTarget`）。
 
 ```online
-在下面示例中，每个特性都是一个元素。当你移动鼠标时你可以看到文本区域的鼠标事件。
+在下面这个示例中，每张脸及其特性都是单独的元素。当你移动鼠标时，你可以在文本区域中看到鼠标事件。
 
-每个事件都有关于元素的去向以及来源的信息。
+每个事件都具有关于 `target` 和 `relatedTarget` 的信息：
 
 [codetabs src="mouseoverout" height=280]
 ```
@@ -31,54 +31,50 @@
 ```warn header="`relatedTarget` 可以为 `null`"
 `relatedTarget` 属性可以为 `null`。
 
-这很正常，而且意味着鼠标不是来源于另一个元素，而是窗口以外。或者是离开了窗口。
+这是正常现象，仅仅是意味着鼠标不是来自另一个元素，而是来自窗口之外。或者它离开了窗口。
 
-当我们在代码中使用 `event.relatedTarget` 时，我们应该记住这种可能性。如果我们访问 `event.relatedTarget.tagName`，那么就会出现错误。
+当我们在代码中使用 `event.relatedTarget` 时，我们应该牢记这种可能性。如果我们访问 `event.relatedTarget.tagName`，那么就会出现错误。
 ```
 
-## 事件频率
+## 跳过元素
 
-当有鼠标移动时，`mousemove` 事件就会被触发。但是这不意味着每个像素都会产生一个事件。
+当鼠标移动时，就会触发 `mousemove` 事件。但这并不意味着每个像素都会导致一个事件。
 
-浏览器会一直检查鼠标的位置。如果它注意到鼠标变化了，那么就会触发相应的事件。
+浏览器会一直检查鼠标的位置。如果发现了变化，就会触发事件。
 
-这意味着如果访问者非常快地移动鼠标，那么 DOM 元素就会被跳过：
+这意味着，如果访问者非常快地移动鼠标，那么某些 DOM 元素就可能被跳过：
 
 ![](mouseover-mouseout-over-elems.svg)
 
-如果鼠标从上面的 `#FROM` 到 `#TO` 元素移动地非常快，那么中间的 `<div>`（或其中的一些）可能会被跳过。`mouseout` 事件可能会在 `#FROM` 上被触发，然后立即在 `#TO` 上触发 `mouseover`。
+如果鼠标从上图所示的 `#FROM` 快速移动到 `#TO` 元素，则中间的 `<div>`（或其中的一些）元素可能会被跳过。`mouseout` 事件可能会在 `#FROM` 上被触发，然后立即在 `#TO` 上触发 `mouseover`。
 
-这在实践中是有用的，因为可能会有许多中间元素。我们并不是真的想要处理每一个进入离开的过程。
+这对性能很有好处，因为可能有很多中间元素。我们并不真的想要处理每一个进入和离开的过程。
 
-另一方面，我们应该记住，我们不能假设鼠标会缓慢地从一个事件移动到另一个事件。是的，它可以“跳”。
+另一方面，我们应该记住，鼠标指针并不会“访问”所有元素。它可以“跳过”一些元素。
 
-特别是，光标可能从窗口外跳进页面的中间。此时 `relatedTarget=null`，这是因为鼠标来自“窗口外（nowhere）”：
+特别是，指针可能会从窗口外跳到页面的中间。在这种情况下，`relatedTarget` 为 `null`，因为它是从石头缝里蹦出来的（nowhere）：
 
 ![](mouseover-mouseout-from-outside.svg)
 
-<div style="display:none">
-在快速移动的情况下，中间元素可能不会触发事件。但如果鼠标进入元素（`mouseover`），当它离开时，就一定会触发`mouseout`。
-</div>
-
 ```online
-在下面的测试区域进行“实时”查看。
+你可以在下面的测试台中“实时”查看。
 
-这段 HTML 包含两个嵌套的 `<div>` 元素。如果鼠标快速通过它们，那么不会有事件发生，或者只有红色 div 的事件被触发，或者是绿色 div 的事件被触发。
+它的 HTML 有两个嵌套的元素：`<div id="child">` 在 `<div id="parent">` 内部。如果将鼠标快速移动到它们上，则可能只有 `<div id="child">` 或者只有 `<div id="parent">` 触发事件，或者根本没有事件触发。 
 
-也可以尝试将指针移动到红色的 `div` 上，然后指针快速地向下并通过绿色的 `div`。如果动作足够快，那么父元素将会被忽略。
+还可以将指针移动到 `<div id="child">` 中，然后将其快速向下移动过其父级元素。如果移动速度足够快，则父元素就会被忽略。鼠标会越过父元素而不会引起其注意。
 
 [codetabs height=360 src="mouseoverout-fast"]
 ```
 
 ## 进入子元素时的“额外” mouseout
 
-想象一下 —— 鼠标指针进入一个元素。`mouseover` 被触发。然后光标进入一个子元素。有趣的是，在这种情况下 `mouseout` 会被触发。光标仍然在元素中，但我们从它那儿接收到了 `mouseout` 事件！
+想象一下 —— 鼠标指针进入一个元素。`mouseover` 被触发。然后指针进入一个子元素。有趣的是，在这种情况下 `mouseout` 会被触发。指针仍然在元素中，但我们从它那儿接收到了 `mouseout` 事件！
 
 ![](mouseover-to-child.svg)
 
 这听起来很奇怪，但很容易解释。
 
-**根据浏览器逻辑，鼠标光标在任意时间只会位于*单个*元素上 —— 嵌套最多的那个（而且是 z-index 最大的那个）。**
+**根据浏览器逻辑，鼠标指针在任意时间只会位于*单个*元素上 —— 嵌套最多的那个（而且是 z-index 最大的那个）。**
 
 因此如果它转到另一个元素（甚至是一个子代），那么它将离开先前的那个。就这么简单。
 
@@ -111,7 +107,7 @@
 
 这些事件在直觉上非常清晰。
 
-当指针进入一个元素时 —— `mouseenter` 被触发，而它在元素内部的去向并不重要。只有当鼠标光标离开时，`mouseleave` 事件才会被触发。
+当指针进入一个元素时 —— `mouseenter` 被触发，而它在元素内部的去向并不重要。只有当鼠标指针离开时，`mouseleave` 事件才会被触发。
 
 如果我们做个相同的例子，但将 `mouseenter/mouseleave` 放在蓝色 `<div>` 中，再做相同的操作 —— 我们就会看到只有移入或移出蓝色 `<div>` 时，事件才会被触发。当鼠标进入红色元素，再回到蓝色元素时，不会有任何反应。子代被全部忽略。
 
@@ -169,7 +165,7 @@ table.onmouseout = function(event) {
 
 [codetabs height=380 src="mouseenter-mouseleave-delegation-2"]
 
-尝试在表格单元之间或内部移动光标，太快或太慢都有问题。与之前不同的是只有 `<td>` 作为一个整体被高亮显示。
+尝试在表格单元之间或内部移动指针，太快或太慢都有问题。与之前不同的是只有 `<td>` 作为一个整体被高亮显示。
 ```
 
 

From a7a318216c43fdfaaf7e75b9af95b658bd495580 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Sat, 28 Mar 2020 21:11:25 +0800
Subject: [PATCH 04/18] Update article.md

---
 .../article.md                                 | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
index 8f803904d0..cb75fcf4a8 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
@@ -66,15 +66,27 @@
 [codetabs height=360 src="mouseoverout-fast"]
 ```
 
-## 进入子元素时的“额外” mouseout
+```smart header="如果 `mouseover` 被触发了，则必须有 `mouseout`"
+在鼠标快速移动的情况下，中间元素可能会被忽略，但是我们可以肯定一件事：如果指针“正式地”进入了一个元素（生成了 `mouseover` 事件），那么一旦它离开，我们就会得到 `mouseout`。
+```
+
+## 当移动到一个子元素时 mouseout
+
+`mouseout` 的一个重要特性 —— 当指针从元素移动到其后代时触发，例如在下面的这个 HTML 中，从 `#parent` 到 `#child`：
+
+```html
+<div id="parent">
+  <div id="child">...</div>
+</div>
+```
 
-想象一下 —— 鼠标指针进入一个元素。`mouseover` 被触发。然后指针进入一个子元素。有趣的是，在这种情况下 `mouseout` 会被触发。指针仍然在元素中，但我们从它那儿接收到了 `mouseout` 事件！
+如果我们在 `#parent` 上，然后将指针更深入地移入 `#child`，但是在 `#parent` 上会得到 `mouseout`！
 
 ![](mouseover-to-child.svg)
 
 这听起来很奇怪，但很容易解释。
 
-**根据浏览器逻辑，鼠标指针在任意时间只会位于*单个*元素上 —— 嵌套最多的那个（而且是 z-index 最大的那个）。**
+**根据浏览器的逻辑，鼠标指针随时可能位于 **单个** 元素上 —— 嵌套最多的那个元素，（而且是 z-index 最大的那个）。**
 
 因此如果它转到另一个元素（甚至是一个子代），那么它将离开先前的那个。就这么简单。
 

From 145b2ae38539d091894131f9e5f129e330b5bfeb Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Sat, 28 Mar 2020 22:05:57 +0800
Subject: [PATCH 05/18] Update article.md

---
 .../article.md                                | 65 +++++++++++++------
 1 file changed, 45 insertions(+), 20 deletions(-)

diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
index cb75fcf4a8..1e5cd8e19a 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
@@ -2,7 +2,7 @@
 
 我们将深入研究鼠标在元素之间移动时发生的事件。
 
-## Mouseover/mouseout，relatedTarget
+## 事件 mouseover/mouseout，relatedTarget
 
 当鼠标指针移到某个元素上时，`mouseover` 事件就会发生，而当鼠标移出该元素时，`mouseout` 事件就会发生。
 
@@ -86,44 +86,69 @@
 
 这听起来很奇怪，但很容易解释。
 
-**根据浏览器的逻辑，鼠标指针随时可能位于 **单个** 元素上 —— 嵌套最多的那个元素，（而且是 z-index 最大的那个）。**
+**根据浏览器的逻辑，鼠标指针随时可能位于单个元素上 —— 嵌套最多的那个元素（z-index 最大的那个）。**
 
-因此如果它转到另一个元素（甚至是一个子代），那么它将离开先前的那个。就这么简单。
+因此，如果它转到另一个元素（甚至是一个后代），那么它将离开前一个元素。
 
-我们可以从以下示例中看到一个有趣的结果。
+请注意事件处理的另一个重要的细节。
 
-红色的 `<div>` 嵌套在蓝色的 `<div>` 中。蓝色的 `<div>` 有 `mouseover/out` 处理器可以记录在文本区发生的所有事件。
+后代的 `mouseover` 事件会冒泡。因此，如果 `#parent` 具有 `mouseover` 处理程序，它将被触发：
 
-尝试进入蓝色元素，然后鼠标移动到红色的上面 —— 然后观察事件：
+![](mouseover-bubble-nested.svg)
+
+```online
+你可以在下面这个示例中很清晰地看到这一点：`<div id="child">` 位于 `<div id="parent">` 内部。`#parent` 元素上有 `mouseover/out` 的处理程序，这些处理程序用于输出事件详细信息。
+
+如果你将鼠标从 `#parent` 移动到 `#child`，那么你会看到在 `#parent` 上有两个事件:
+1. `mouseout [target: parent]`（离开 parent），然后
+2. `mouseover [target: child]`（来到 child，冒泡）。
 
 [codetabs height=360 src="mouseoverout-child"]
+```
 
-1. 在进入蓝色层时 —— 我们获取到了 `mouseover [target: blue]`。
-2. 之后从蓝色移动红色时 —— 我们获取到了 `mouseout [target: blue]`（离开父元素）。
-3. ...然后立即获取到的是 `mouseover [target: red]`。
+如上例所示，当指针从 `#parent` 元素移动到 `#child` 时，会在父元素上触发两个处理程序：`mouseout` 和 `mouseover`：
 
-因此，对于不考虑 `target` 的处理器，这看起来就像是在 `mouseout` 事件中，鼠标离开了父元素（第 `(2)` 步），然后在第 `(3)` 步的 `mouseover` 事件中鼠标又回到了父元素上。
+```js
+parent.onmouseout = function(event) {
+  /* event.target: parent element */
+};
+parent.onmouseover = function(event) {
+  /* event.target: child element (bubbled) */
+};
+```
 
-如果我们在进入/离开元素时执行一些动作，就会多执行很多“错误”操作。对于简单的事情可能不引人注目。但对于复杂的事情来说，会带来不必要的副作用。
+**如果我们不检查处理程序中的 `event.target`，那么似乎鼠标指针离开了 `#parent` 元素，然后立即回到了它上面。**
 
-我们可以通过使用 `mouseenter/mouseleave` 事件来解决这个问题。
+但是事实并非如此！指针仍然位于父元素上，它只是更深入地移入了子元素。
 
-## Mouseenter 和 mouseleave 事件
+如果离开父元素时有一些行为（action），例如一个动画在 `parent.onmouseout` 中运行，当指针深入 `#parent` 时，我们并不希望发生这种行为。
 
-`mouseenter/mouseleave` 事件类似于 `mouseover/mouseout`。当鼠标指针移入/移出元素时，它们也会被触发。
+为了避免它，我们可以在处理程序中检查 `relatedTarget`，如果鼠标指针仍在元素内，则忽略此类事件。
 
-但有两个不同之处：
+另外，我们可以使用其他事件：`mouseenter` 和 `mouseleave`，它们没有此类问题，接下来我们就对其进行详细介绍。
 
-1. 元素内部的转换不会有影响。
-2. `mouseenter/mouseleave` 事件不会冒泡。
+## 事件 mouseenter 和 mouseleave
 
-这些事件在直觉上非常清晰。
+事件 `mouseenter/mouseleave` 类似于 `mouseover/mouseout`。它们在鼠标指针进入/离开元素时触发。
 
-当指针进入一个元素时 —— `mouseenter` 被触发，而它在元素内部的去向并不重要。只有当鼠标指针离开时，`mouseleave` 事件才会被触发。
+但是有两个重要的区别：
 
-如果我们做个相同的例子，但将 `mouseenter/mouseleave` 放在蓝色 `<div>` 中，再做相同的操作 —— 我们就会看到只有移入或移出蓝色 `<div>` 时，事件才会被触发。当鼠标进入红色元素，再回到蓝色元素时，不会有任何反应。子代被全部忽略。
+1. 元素内部与后代之间的转换不会产生影响。
+2. 事件 `mouseenter/mouseleave` 不会冒泡。
+
+这些事件非常简单。
+
+当指针进入一个元素时 —— 会触发 `mouseenter`。而指针在元素或其后代中的确切位置无关紧要。
+
+当鼠标指针离开该元素时，事件 `mouseleave` 才会触发。
+
+```online
+这个例子和上面的例子相似，但是现在最顶层的元素有 `mouseenter/mouseleave` 而不是 `mouseover/mouseout`。
+
+正如你所看到的，唯一生成的事件是与将指针移入或移出顶部元素有关的事件。当指针移入 child 并返回时，什么也没发生。在后代之间的移动会被忽略。
 
 [codetabs height=340 src="mouseleave"]
+```
 
 ## 事件委托
 

From c2039545225bdb171ce8863c71af29a9e2fb425f Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Sat, 28 Mar 2020 22:43:51 +0800
Subject: [PATCH 06/18] Update article.md

---
 .../article.md                                | 57 ++++++++++---------
 1 file changed, 29 insertions(+), 28 deletions(-)

diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
index 1e5cd8e19a..5ca791b3ee 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
@@ -21,7 +21,7 @@
 - `event.relatedTarget` —— 是鼠标移动到的，当前指针位置下的元素（`target` -> `relatedTarget`）。
 
 ```online
-在下面这个示例中，每张脸及其特性都是单独的元素。当你移动鼠标时，你可以在文本区域中看到鼠标事件。
+在下面这个示例中，每张脸及其功能都是单独的元素。当你移动鼠标时，你可以在文本区域中看到鼠标事件。
 
 每个事件都具有关于 `target` 和 `relatedTarget` 的信息：
 
@@ -48,7 +48,7 @@
 
 如果鼠标从上图所示的 `#FROM` 快速移动到 `#TO` 元素，则中间的 `<div>`（或其中的一些）元素可能会被跳过。`mouseout` 事件可能会在 `#FROM` 上被触发，然后立即在 `#TO` 上触发 `mouseover`。
 
-这对性能很有好处，因为可能有很多中间元素。我们并不真的想要处理每一个进入和离开的过程。
+这对性能很有好处，因为可能有很多中间元素。我们并不真的想要处理每一个移入和离开的过程。
 
 另一方面，我们应该记住，鼠标指针并不会“访问”所有元素。它可以“跳过”一些元素。
 
@@ -67,12 +67,12 @@
 ```
 
 ```smart header="如果 `mouseover` 被触发了，则必须有 `mouseout`"
-在鼠标快速移动的情况下，中间元素可能会被忽略，但是我们可以肯定一件事：如果指针“正式地”进入了一个元素（生成了 `mouseover` 事件），那么一旦它离开，我们就会得到 `mouseout`。
+在鼠标快速移动的情况下，中间元素可能会被忽略，但是我们可以肯定一件事：如果指针“正式地”移入了一个元素（生成了 `mouseover` 事件），那么一旦它离开，我们就会得到 `mouseout`。
 ```
 
 ## 当移动到一个子元素时 mouseout
 
-`mouseout` 的一个重要特性 —— 当指针从元素移动到其后代时触发，例如在下面的这个 HTML 中，从 `#parent` 到 `#child`：
+`mouseout` 的一个重要功能 —— 当指针从元素移动到其后代时触发，例如在下面的这个 HTML 中，从 `#parent` 到 `#child`：
 
 ```html
 <div id="parent">
@@ -129,7 +129,7 @@ parent.onmouseover = function(event) {
 
 ## 事件 mouseenter 和 mouseleave
 
-事件 `mouseenter/mouseleave` 类似于 `mouseover/mouseout`。它们在鼠标指针进入/离开元素时触发。
+事件 `mouseenter/mouseleave` 类似于 `mouseover/mouseout`。它们在鼠标指针移入/离开元素时触发。
 
 但是有两个重要的区别：
 
@@ -138,7 +138,7 @@ parent.onmouseover = function(event) {
 
 这些事件非常简单。
 
-当指针进入一个元素时 —— 会触发 `mouseenter`。而指针在元素或其后代中的确切位置无关紧要。
+当指针移入一个元素时 —— 会触发 `mouseenter`。而指针在元素或其后代中的确切位置无关紧要。
 
 当鼠标指针离开该元素时，事件 `mouseleave` 才会触发。
 
@@ -152,20 +152,20 @@ parent.onmouseover = function(event) {
 
 ## 事件委托
 
-`mouseenter/leave` 事件非常简单，也非常容易使用。但它们不会冒泡。因此我们不能用它们来进行事件委托。
+事件 `mouseenter/leave` 非常简单且易用。但它们不会冒泡。因此，我们不能使用它们来进行事件委托。
 
-想象我们想要为表单元来处理鼠标的移入/移除。有几百个表单元。
+假设我们要处理表格的单元格的鼠标移入/离开。并且这里有数百个单元格。
 
-通常的解决方案是 —— 在 `<table>` 中设置处理器，并在那里处理事件。但 `mouseenter/leave` 不会冒泡。因此如果类似事件发生在 `<td>` 上，那么只有 `<td>` 上的处理器才能捕获到它。
+通常的解决方案是 —— 在 `<table>` 中设置处理程序，并在那里处理事件。但 `mouseenter/leave` 不会冒泡。因此，如果类似的事件发生在 `<td>` 上，那么只有 `<td>` 上的处理程序才能捕获到它。
 
-只有在移入/移出整个表单时才会触发处理器处理 `<table>` 上的 `mouseenter/leave`。在它内部转换的任何信息都无法获取。 
+`<table>` 上的 `mouseenter/leave` 的处理程序仅在指针移入/离开整个表格时才会触发。无法获取有关其内部移动的任何信息。
 
-没问题 —— 我们使用 `mouseover/mouseout`。
+因此，让我们使用 `mouseover/mouseout`。
 
-一个简单的处理器可能像这样：
+让我们从突出显示鼠标指针下的元素的简单处理程序开始：
 
 ```js
-// 高亮鼠标下的单元
+// 突出显示鼠标指针下的元素
 table.onmouseover = function(event) {
   let target = event.target;
   target.style.background = 'pink';
@@ -178,34 +178,35 @@ table.onmouseout = function(event) {
 ```
 
 ```online
+现在它们已经激活了。当鼠标在下面这个表格的各个元素上移动时，当前位于鼠标指针下的元素会被突出显示：
+
 [codetabs height=480 src="mouseenter-mouseleave-delegation"]
 ```
 
-进入到任何元素或者表格内的元素时，这些处理器都可以运行。
+在我们的例子中，我们想要处理表格的单元格 `<td>` 之间的移动：移入一个单元格并离开它。我们对其他移动并不感兴趣，例如在单元格内部或在所有单元格的外部。让我们把这些过滤掉。
 
-但我们只想处理整个 `<td>` 元素中的进出转换。高亮显示整个单元。我们不想处理 `<td>` 子级之间发生的转换。
+我们可以这样做：
 
-其中一个解决方案：
+- 在变量中记住当前被高亮显示的 `<td>`，让我们称它为 `currentElem`。
+- `mouseover` ——  如果我们仍然在当前的 `<td>` 中，则忽略该事件。
+- `mouseout` —— 如果没有离开当前的 `<td>`，则忽略。
 
-- 记住在变量中高亮显示的 `<td>`。
-- `mouseover` ——  如果我们仍然在当前 `<td>` 内，则忽略该事件。
-- `mouseout` —— 如果没有离开 `<td>`，则忽略。
+这是说明所有可能情况的代码示例：
 
-当我们在 `<td>` 的子代间移动时，会过滤掉“额外”事件。
+[js src="mouseenter-mouseleave-delegation-2/script.js"]
 
-```offline
-详细信息在[完整示例中](sandbox:mouseenter-mouseleave-delegation-2)。
-```
+再次，重要的功能是：
+1. 它使用事件委托来处理表格中任何 `<td>` 的移入/离开。因此，它依赖于 `mouseover/out` 而不是 `mouseenter/leave`，`mouseenter/leave` 不会冒泡，因此也不允许事件委托。
+2. 额外的事件，例如在 `<td>` 的后代之间移动都会被过滤掉，因此 `onEnter/Leave` 仅在指针离开/移入 `<td>` 整体时才会运行。
 
 ```online
-以下是包含所有细节的完整示例：
+这是带有所有详细信息的完整示例：
 
-[codetabs height=380 src="mouseenter-mouseleave-delegation-2"]
+[codetabs height=460 src="mouseenter-mouseleave-delegation-2"]
 
-尝试在表格单元之间或内部移动指针，太快或太慢都有问题。与之前不同的是只有 `<td>` 作为一个整体被高亮显示。
+尝试将鼠标指针移入和移出表格单元格及其内部。快还是慢都没关系。与前面的示例不同，只有 `<td>` 被作为一个整体被突出显示。
 ```
 
-
 ## 总结
 
 我们讲述了 `mouseover`、`mouseout`、`mousemove`、`mouseenter` 和 `mouseleave` 事件。
@@ -215,4 +216,4 @@ table.onmouseout = function(event) {
 - 鼠标的快速移动可以使 `mouseover, mousemove, mouseout` 跳过一些中间元素。
 - `mouseover/out` 事件和 `mouseenter/leave` 事件有一个额外的目标：`relatedTarget`。这是作为起点/终点的元素，是对 `target` 的补充。
 - 即使从父元素转到子元素时，`mouseover/out` 也会被触发。它们假设鼠标一次只会移入一个元素 —— 最深的那个。 
-- `mouseenter/leave` 事件不会冒泡，而且当鼠标进入子元素时也不会被触发。它们只关注鼠标在整个元素的内部还是外部。
+- `mouseenter/leave` 事件不会冒泡，而且当鼠标移入子元素时也不会被触发。它们只关注鼠标在整个元素的内部还是外部。

From 21e6b71023b53a6bbba61d4399f5ce2c06259201 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Sat, 28 Mar 2020 22:47:26 +0800
Subject: [PATCH 07/18] Update article.md

---
 .../article.md                                           | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
index 5ca791b3ee..5a97e1ed03 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
@@ -209,11 +209,12 @@ table.onmouseout = function(event) {
 
 ## 总结
 
-我们讲述了 `mouseover`、`mouseout`、`mousemove`、`mouseenter` 和 `mouseleave` 事件。
+我们讲了 `mouseover`，`mouseout`，`mousemove`，`mouseenter` 和 `mouseleave` 事件。
 
-值得注意的事情：
+以下这些事情要注意：
 
-- 鼠标的快速移动可以使 `mouseover, mousemove, mouseout` 跳过一些中间元素。
+- 快速移动鼠标可能会跳过中间元素。
 - `mouseover/out` 事件和 `mouseenter/leave` 事件有一个额外的目标：`relatedTarget`。这是作为起点/终点的元素，是对 `target` 的补充。
+
 - 即使从父元素转到子元素时，`mouseover/out` 也会被触发。它们假设鼠标一次只会移入一个元素 —— 最深的那个。 
-- `mouseenter/leave` 事件不会冒泡，而且当鼠标移入子元素时也不会被触发。它们只关注鼠标在整个元素的内部还是外部。
+`mouseenter/leave` 事件不会冒泡，而且当鼠标移入子元素时也不会被触发。它们只关注鼠标在整个元素的内部还是外部。

From 1b4283a4e583605cd58a146352179e2d98d4b5cd Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Sun, 29 Mar 2020 10:47:31 +0800
Subject: [PATCH 08/18] Update article.md

---
 .../article.md                                       | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
index 5a97e1ed03..d33fc32eca 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
@@ -48,7 +48,7 @@
 
 如果鼠标从上图所示的 `#FROM` 快速移动到 `#TO` 元素，则中间的 `<div>`（或其中的一些）元素可能会被跳过。`mouseout` 事件可能会在 `#FROM` 上被触发，然后立即在 `#TO` 上触发 `mouseover`。
 
-这对性能很有好处，因为可能有很多中间元素。我们并不真的想要处理每一个移入和离开的过程。
+这对性能很有好处，因为可能有很多中间元素。我们并不真的想要处理每一个移入和移出的过程。
 
 另一方面，我们应该记住，鼠标指针并不会“访问”所有元素。它可以“跳过”一些元素。
 
@@ -129,7 +129,7 @@ parent.onmouseover = function(event) {
 
 ## 事件 mouseenter 和 mouseleave
 
-事件 `mouseenter/mouseleave` 类似于 `mouseover/mouseout`。它们在鼠标指针移入/离开元素时触发。
+事件 `mouseenter/mouseleave` 类似于 `mouseover/mouseout`。它们在鼠标指针移入/移出元素时触发。
 
 但是有两个重要的区别：
 
@@ -154,11 +154,11 @@ parent.onmouseover = function(event) {
 
 事件 `mouseenter/leave` 非常简单且易用。但它们不会冒泡。因此，我们不能使用它们来进行事件委托。
 
-假设我们要处理表格的单元格的鼠标移入/离开。并且这里有数百个单元格。
+假设我们要处理表格的单元格的鼠标移入/移出。并且这里有数百个单元格。
 
 通常的解决方案是 —— 在 `<table>` 中设置处理程序，并在那里处理事件。但 `mouseenter/leave` 不会冒泡。因此，如果类似的事件发生在 `<td>` 上，那么只有 `<td>` 上的处理程序才能捕获到它。
 
-`<table>` 上的 `mouseenter/leave` 的处理程序仅在指针移入/离开整个表格时才会触发。无法获取有关其内部移动的任何信息。
+`<table>` 上的 `mouseenter/leave` 的处理程序仅在指针移入/移出整个表格时才会触发。无法获取有关其内部移动的任何信息。
 
 因此，让我们使用 `mouseover/mouseout`。
 
@@ -196,8 +196,8 @@ table.onmouseout = function(event) {
 [js src="mouseenter-mouseleave-delegation-2/script.js"]
 
 再次，重要的功能是：
-1. 它使用事件委托来处理表格中任何 `<td>` 的移入/离开。因此，它依赖于 `mouseover/out` 而不是 `mouseenter/leave`，`mouseenter/leave` 不会冒泡，因此也不允许事件委托。
-2. 额外的事件，例如在 `<td>` 的后代之间移动都会被过滤掉，因此 `onEnter/Leave` 仅在指针离开/移入 `<td>` 整体时才会运行。
+1. 它使用事件委托来处理表格中任何 `<td>` 的移入/移出。因此，它依赖于 `mouseover/out` 而不是 `mouseenter/leave`，`mouseenter/leave` 不会冒泡，因此也不允许事件委托。
+2. 额外的事件，例如在 `<td>` 的后代之间移动都会被过滤掉，因此 `onEnter/Leave` 仅在指针移入/移出 `<td>` 整体时才会运行。
 
 ```online
 这是带有所有详细信息的完整示例：

From b8002dd883994d8979020a5dcee9f42fd55aec17 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Sun, 29 Mar 2020 10:59:55 +0800
Subject: [PATCH 09/18] Update article.md

---
 .../article.md                                                | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
index d33fc32eca..da47bde6ec 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
@@ -67,7 +67,7 @@
 ```
 
 ```smart header="如果 `mouseover` 被触发了，则必须有 `mouseout`"
-在鼠标快速移动的情况下，中间元素可能会被忽略，但是我们可以肯定一件事：如果指针“正式地”移入了一个元素（生成了 `mouseover` 事件），那么一旦它离开，我们就会得到 `mouseout`。
+在鼠标快速移动的情况下，中间元素可能会被忽略，但是我们可以肯定一件事：如果指针“正式地”移入了一个元素（生成了 `mouseover` 事件），那么一旦它移出，我们就会得到 `mouseout`。
 ```
 
 ## 当移动到一个子元素时 mouseout
@@ -140,7 +140,7 @@ parent.onmouseover = function(event) {
 
 当指针移入一个元素时 —— 会触发 `mouseenter`。而指针在元素或其后代中的确切位置无关紧要。
 
-当鼠标指针离开该元素时，事件 `mouseleave` 才会触发。
+当鼠标指针移出该元素时，事件 `mouseleave` 才会触发。
 
 ```online
 这个例子和上面的例子相似，但是现在最顶层的元素有 `mouseenter/mouseleave` 而不是 `mouseover/mouseout`。

From a078d65daeccca0531ce882ceedfaf89fae925fd Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Sun, 29 Mar 2020 11:18:10 +0800
Subject: [PATCH 10/18] Update article.md

---
 2-ui/2-events/01-introduction-browser-events/article.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/article.md b/2-ui/2-events/01-introduction-browser-events/article.md
index 260359af43..b5e87e05c9 100644
--- a/2-ui/2-events/01-introduction-browser-events/article.md
+++ b/2-ui/2-events/01-introduction-browser-events/article.md
@@ -216,7 +216,7 @@ Web 标准的开发者很早就了解到了这一点，并提出了一种使用
 添加处理程序的语法：
 
 ```js
-element.addEventListener(event, handler, [options]);
+element.addEventListener(event, handler[, options]);
 ```
 
 `event`
@@ -235,7 +235,7 @@ element.addEventListener(event, handler, [options]);
 要移除处理程序，可以使用 `removeEventListener`：
 
 ```js
-element.removeEventListener(event, handler, [options]);
+element.removeEventListener(event, handler[, options]);
 ```
 
 ````warn header="移除需要相同的函数"
@@ -440,7 +440,7 @@ document.addEventListener("DOMContentLoaded", function() {
 
 1. HTML 特性（attribute）：`onclick="..."`。
 2. DOM 属性（property）：`elem.onclick = function`。
-3. 方法（method）：`elem.addEventListener(event, handler, [phase])` 用于添加，`removeEventListener` 用于移除。
+3. 方法（method）：`elem.addEventListener(event, handler[, phase])` 用于添加，`removeEventListener` 用于移除。
 
 HTML 特性很少使用，因为 HTML 标签中的 JavaScript 看起来有些奇怪且陌生。而且也不能在里面写太多代码。
 

From 6f8adf2a9f29d66d905f748bbe0ca1748b68302b Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Sun, 29 Mar 2020 11:34:50 +0800
Subject: [PATCH 11/18] Update article.md

---
 .../article.md                                | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
index da47bde6ec..ef1604b416 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
@@ -4,7 +4,7 @@
 
 ## 事件 mouseover/mouseout，relatedTarget
 
-当鼠标指针移到某个元素上时，`mouseover` 事件就会发生，而当鼠标移出该元素时，`mouseout` 事件就会发生。
+当鼠标指针移到某个元素上时，`mouseover` 事件就会发生，而当鼠标离开该元素时，`mouseout` 事件就会发生。
 
 ![](mouseover-mouseout.svg)
 
@@ -48,7 +48,7 @@
 
 如果鼠标从上图所示的 `#FROM` 快速移动到 `#TO` 元素，则中间的 `<div>`（或其中的一些）元素可能会被跳过。`mouseout` 事件可能会在 `#FROM` 上被触发，然后立即在 `#TO` 上触发 `mouseover`。
 
-这对性能很有好处，因为可能有很多中间元素。我们并不真的想要处理每一个移入和移出的过程。
+这对性能很有好处，因为可能有很多中间元素。我们并不真的想要处理每一个移入和离开的过程。
 
 另一方面，我们应该记住，鼠标指针并不会“访问”所有元素。它可以“跳过”一些元素。
 
@@ -67,7 +67,7 @@
 ```
 
 ```smart header="如果 `mouseover` 被触发了，则必须有 `mouseout`"
-在鼠标快速移动的情况下，中间元素可能会被忽略，但是我们可以肯定一件事：如果指针“正式地”移入了一个元素（生成了 `mouseover` 事件），那么一旦它移出，我们就会得到 `mouseout`。
+在鼠标快速移动的情况下，中间元素可能会被忽略，但是我们可以肯定一件事：如果指针“正式地”进入了一个元素（生成了 `mouseover` 事件），那么一旦它离开，我们就会得到 `mouseout`。
 ```
 
 ## 当移动到一个子元素时 mouseout
@@ -129,7 +129,7 @@ parent.onmouseover = function(event) {
 
 ## 事件 mouseenter 和 mouseleave
 
-事件 `mouseenter/mouseleave` 类似于 `mouseover/mouseout`。它们在鼠标指针移入/移出元素时触发。
+事件 `mouseenter/mouseleave` 类似于 `mouseover/mouseout`。它们在鼠标指针进入/离开元素时触发。
 
 但是有两个重要的区别：
 
@@ -138,14 +138,14 @@ parent.onmouseover = function(event) {
 
 这些事件非常简单。
 
-当指针移入一个元素时 —— 会触发 `mouseenter`。而指针在元素或其后代中的确切位置无关紧要。
+当指针进入一个元素时 —— 会触发 `mouseenter`。而指针在元素或其后代中的确切位置无关紧要。
 
-当鼠标指针移出该元素时，事件 `mouseleave` 才会触发。
+当鼠标指针离开该元素时，事件 `mouseleave` 才会触发。
 
 ```online
 这个例子和上面的例子相似，但是现在最顶层的元素有 `mouseenter/mouseleave` 而不是 `mouseover/mouseout`。
 
-正如你所看到的，唯一生成的事件是与将指针移入或移出顶部元素有关的事件。当指针移入 child 并返回时，什么也没发生。在后代之间的移动会被忽略。
+正如你所看到的，唯一生成的事件是与将指针移入或移出顶部元素有关的事件。当指针进入 child 并返回时，什么也没发生。在后代之间的移动会被忽略。
 
 [codetabs height=340 src="mouseleave"]
 ```
@@ -154,11 +154,11 @@ parent.onmouseover = function(event) {
 
 事件 `mouseenter/leave` 非常简单且易用。但它们不会冒泡。因此，我们不能使用它们来进行事件委托。
 
-假设我们要处理表格的单元格的鼠标移入/移出。并且这里有数百个单元格。
+假设我们要处理表格的单元格的鼠标进入/离开。并且这里有数百个单元格。
 
 通常的解决方案是 —— 在 `<table>` 中设置处理程序，并在那里处理事件。但 `mouseenter/leave` 不会冒泡。因此，如果类似的事件发生在 `<td>` 上，那么只有 `<td>` 上的处理程序才能捕获到它。
 
-`<table>` 上的 `mouseenter/leave` 的处理程序仅在指针移入/移出整个表格时才会触发。无法获取有关其内部移动的任何信息。
+`<table>` 上的 `mouseenter/leave` 的处理程序仅在指针进入/离开整个表格时才会触发。无法获取有关其内部移动的任何信息。
 
 因此，让我们使用 `mouseover/mouseout`。
 
@@ -183,7 +183,7 @@ table.onmouseout = function(event) {
 [codetabs height=480 src="mouseenter-mouseleave-delegation"]
 ```
 
-在我们的例子中，我们想要处理表格的单元格 `<td>` 之间的移动：移入一个单元格并离开它。我们对其他移动并不感兴趣，例如在单元格内部或在所有单元格的外部。让我们把这些过滤掉。
+在我们的例子中，我们想要处理表格的单元格 `<td>` 之间的移动：进入一个单元格并离开它。我们对其他移动并不感兴趣，例如在单元格内部或在所有单元格的外部。让我们把这些过滤掉。
 
 我们可以这样做：
 
@@ -196,8 +196,8 @@ table.onmouseout = function(event) {
 [js src="mouseenter-mouseleave-delegation-2/script.js"]
 
 再次，重要的功能是：
-1. 它使用事件委托来处理表格中任何 `<td>` 的移入/移出。因此，它依赖于 `mouseover/out` 而不是 `mouseenter/leave`，`mouseenter/leave` 不会冒泡，因此也不允许事件委托。
-2. 额外的事件，例如在 `<td>` 的后代之间移动都会被过滤掉，因此 `onEnter/Leave` 仅在指针移入/移出 `<td>` 整体时才会运行。
+1. 它使用事件委托来处理表格中任何 `<td>` 的进入/离开。因此，它依赖于 `mouseover/out` 而不是 `mouseenter/leave`，`mouseenter/leave` 不会冒泡，因此也不允许事件委托。
+2. 额外的事件，例如在 `<td>` 的后代之间移动都会被过滤掉，因此 `onEnter/Leave` 仅在指针进入/离开 `<td>` 整体时才会运行。
 
 ```online
 这是带有所有详细信息的完整示例：

From 55fc99a2bc19726aa38738e0e018ac4c0cd271d6 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Sun, 29 Mar 2020 12:08:08 +0800
Subject: [PATCH 12/18] Update article.md

---
 .../article.md                                        | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
index ef1604b416..58c4c87517 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
@@ -204,17 +204,18 @@ table.onmouseout = function(event) {
 
 [codetabs height=460 src="mouseenter-mouseleave-delegation-2"]
 
-尝试将鼠标指针移入和移出表格单元格及其内部。快还是慢都没关系。与前面的示例不同，只有 `<td>` 被作为一个整体被突出显示。
+尝试将鼠标指针移入和移出表格单元格及其内部。快还是慢都没关系。与前面的示例不同，只有 `<td>` 被作为一个整体突出显示。
 ```
 
 ## 总结
 
 我们讲了 `mouseover`，`mouseout`，`mousemove`，`mouseenter` 和 `mouseleave` 事件。
 
-以下这些事情要注意：
+以下这些内容要注意：
 
 - 快速移动鼠标可能会跳过中间元素。
-- `mouseover/out` 事件和 `mouseenter/leave` 事件有一个额外的目标：`relatedTarget`。这是作为起点/终点的元素，是对 `target` 的补充。
+- `mouseover/out` 和 `mouseenter/leave` 事件还有一个附加属性：`relatedTarget`。这就是我们来自/到的元素，是对 `target` 的补充。
 
-- 即使从父元素转到子元素时，`mouseover/out` 也会被触发。它们假设鼠标一次只会移入一个元素 —— 最深的那个。 
-`mouseenter/leave` 事件不会冒泡，而且当鼠标移入子元素时也不会被触发。它们只关注鼠标在整个元素的内部还是外部。
+即使我们从父元素转到子元素时，也会触发 `mouseover/out` 事件。浏览器假定鼠标一次只会位于一个元素上 —— 最深的那个。
+
+`mouseenter/leave` 在这方面不同：它们仅在鼠标进入和离开元素时才触发。并且它们不会冒泡。

From 5f118b5719adbf23b666cd262ed4e34f72ab877e Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Sun, 29 Mar 2020 12:11:53 +0800
Subject: [PATCH 13/18] Update article.md

---
 .../article.md                                                  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
index 58c4c87517..63525dc709 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
@@ -218,4 +218,4 @@ table.onmouseout = function(event) {
 
 即使我们从父元素转到子元素时，也会触发 `mouseover/out` 事件。浏览器假定鼠标一次只会位于一个元素上 —— 最深的那个。
 
-`mouseenter/leave` 在这方面不同：它们仅在鼠标进入和离开元素时才触发。并且它们不会冒泡。
+`mouseenter/leave` 事件在这方面不同：它们仅在鼠标进入和离开元素时才触发。并且它们不会冒泡。

From 0515fc3a02662ca46e13c133e057b09466f1e867 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Sun, 29 Mar 2020 13:53:06 +0800
Subject: [PATCH 14/18] Update script.js

---
 .../script.js                                 | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js
index 6a3202467e..03f15362fb 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js
@@ -1,54 +1,54 @@
-// <td> under the mouse right now (if any)
+// 现在在鼠标下方的 <td>（如果有）
 let currentElem = null;
 
 table.onmouseover = function(event) {
-  // before entering a new element, the mouse always leaves the previous one
-  // if currentElem is set, we didn't leave the previous <td>,
-  // that's a mouseover inside it, ignore the event
+  // 在进入一个新的元素前，鼠标总是会先离开前一个元素
+  // 如果设置了 currentElem，那么我们就没有鼠标所悬停在的前一个 <td>，
+  // 忽略此事件
   if (currentElem) return;
 
   let target = event.target.closest('td');
 
-  // we moved not into a <td> - ignore
+  // 我们移动到的不是一个 <td> —— 忽略
   if (!target) return;
 
-  // moved into <td>, but outside of our table (possible in case of nested tables)
-  // ignore
+  // 现在移动到了 <td> 上，但在处于了我们表格的外部（可能因为是嵌套的表格）
+  // 忽略
   if (!table.contains(target)) return;
 
-  // hooray! we entered a new <td>
+  // 给力！我们进入了一个新的 <td>
   currentElem = target;
   onEnter(currentElem);
 };
 
 
 table.onmouseout = function(event) {
-  // if we're outside of any <td> now, then ignore the event
-  // that's probably a move inside the table, but out of <td>,
-  // e.g. from <tr> to another <tr>
+  // 如果我们现在处于所有 <td> 的外部，则忽略此事件
+  // 这可能是一个表格内的移动，但是在 <td> 外，
+  // 例如从一个 <tr> 到另一个 <tr>
   if (!currentElem) return;
 
-  // we're leaving the element – where to? Maybe to a descendant?
+  // 我们将要离开这个元素 —— 去哪儿？可能是去一个后代？
   let relatedTarget = event.relatedTarget;
 
   while (relatedTarget) {
-    // go up the parent chain and check – if we're still inside currentElem
-    // then that's an internal transition – ignore it
+    // 到父链上并检查 —— 我们是否还在 currentElem 内
+    // 然后发现，这只是一个内部移动 —— 忽略它
     if (relatedTarget == currentElem) return;
 
     relatedTarget = relatedTarget.parentNode;
   }
 
-  // we left the <td>. really.
+  // 我们离开了 <td>。真的。
   onLeave(currentElem);
   currentElem = null;
 };
 
-// any functions to handle entering/leaving an element
+// 任何处理进入/离开一个元素的函数
 function onEnter(elem) {
   elem.style.background = 'pink';
 
-  // show that in textarea
+  // 在文本区域显示它
   text.value += `over -> ${currentElem.tagName}.${currentElem.className}\n`;
   text.scrollTop = 1e6;
 }
@@ -56,7 +56,7 @@ function onEnter(elem) {
 function onLeave(elem) {
   elem.style.background = '';
 
-  // show that in textarea
+  // 在文本区域显示它
   text.value += `out <- ${elem.tagName}.${elem.className}\n`;
   text.scrollTop = 1e6;
 }

From 6ee10486467ad90419d13bae7f4bdce9581d4784 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Sun, 29 Mar 2020 13:55:32 +0800
Subject: [PATCH 15/18] Update script.js

---
 .../mouseenter-mouseleave-delegation-2.view/script.js           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js
index 03f15362fb..43e9596652 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js
@@ -1,4 +1,4 @@
-// 现在在鼠标下方的 <td>（如果有）
+// 现在位于鼠标下方的 <td>（如果有）
 let currentElem = null;
 
 table.onmouseover = function(event) {

From 6c68683997380b03d3d90a1da13ce73bab22fe25 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Sun, 29 Mar 2020 14:03:01 +0800
Subject: [PATCH 16/18] Update task.md

---
 .../1-behavior-nested-tooltip/task.md                | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md
index fa26241236..28674bcca1 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md
@@ -2,13 +2,15 @@ importance: 5
 
 ---
 
-# 改进工具提示行为
+# 改进的工具提示行为
 
-编写一个带有 `data-tooltip` 属性元素提示工具的 JavaScript 函数。
+编写 JavaScript，在带有 `data-tooltip` 特性（attribute）的元素上显示一个工具提示。该特性的值应该成为工具提示的文本。
 
-就像任务 <info:task/behavior-tooltip>，但这里可以嵌套带有注释的元素。下面显示了嵌套最深的工具提示。
+与任务 <info:task/behavior-tooltip> 类似，但这里可以嵌套带有注解（annotated）的元素。并且显示的是嵌套最深的工具提示。
 
-比如：
+同一时间只能显示一个工具提示。
+
+例如：
 
 ```html
 <div data-tooltip="Here – is the house interior" id="house">
@@ -21,5 +23,3 @@ importance: 5
 在 iframe 中的结果：
 
 [iframe src="solution" height=300 border=1]
-
-P.S. 提示：同一时间只显示一个工具提示。

From ff87a2599a62a12ece60828c764f1f03981888dc Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Sun, 29 Mar 2020 14:29:26 +0800
Subject: [PATCH 17/18] Update task.md

---
 .../2-hoverintent/task.md                     | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md
index 0dd55b7ea2..e85bd8e44a 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md
@@ -2,29 +2,30 @@ importance: 5
 
 ---
 
-# "Smart" 工具提示
+# “智能”工具提示
 
-编写一个函数，仅在访问者将鼠标**移动**到它上面而非**通过**它时，才会显示元素上的工具提示。
+编写一个函数，该函数仅在访问者将鼠标 **移至** 元素而不是 **移过** 元素的情况下，在该元素上显示工具提示。
 
-换句话说，如果访问者把鼠标移动到元素上，然后停下 —— 显示工具提示。如果访问者将鼠标快速移过元素，那就不需要显示，谁想要多余的内容呢？
+换句话说，如果访问者将鼠标移至元素上，并停下来 —— 显示工具提示。如果他们只是将鼠标移过元素，那就没必要显示，谁想要多余的闪烁呢？
 
-从技术上说，我们可以测量鼠标在元素上的经过速度，如果速度很慢，那么我们认为它**在元素上**并显示工具提示，如果速度太快 —— 那么我们就忽略它。
+从技术上说，我们可以测量元素上的鼠标移动速度，如果速度很慢，那么我们就假定它 **在元素上**，并显示工具提示，如果速度很快 —— 那么我们就忽略它。
 
-为它创建一个通用对象 `new HoverIntent(options)`，加上 `options`：
+为此，我们创建一个通用对象 `new HoverIntent(options)`。
 
+其 `options`：
 - `elem` —— 要跟踪的元素。
-- `over` —— 如果鼠标缓慢地移动元素，调用该函数。
-- `out` —— 当鼠标离开元素时，调用函数（如果 `over` 被调用过了）。
+- `over` —— 鼠标移动到元素上时要调用的函数：即，鼠标在元素上的移动速度很慢，或者停在该元素上。
+- `out` —— 当鼠标离开元素时调用的函数（如果 `over` 已经被调用过了）。
 
 在工具提示中使用此类对象的示例：
 
 ```js
-// 工具提示样本
+// 一个简单的工具提示
 let tooltip = document.createElement('div');
 tooltip.className = "tooltip";
 tooltip.innerHTML = "Tooltip";
 
-// 对象将跟踪鼠标，并调用 over/out
+// 该对象将跟踪鼠标，并调用 over/out
 new HoverIntent({
   elem,
   over() {
@@ -42,6 +43,6 @@ new HoverIntent({
 
 [iframe src="solution" height=140]
 
-如果鼠标移动速度超过 "clock"，那么不会发生任何事件，如果速度很慢或者在它们上面停下来，那么就会有一个工具提示。
+如果你将鼠标快速地从“时钟”上移动过去，那么什么都不会发生，如果你使用鼠标在“时钟”上慢慢移动，或者停在“时钟”上，则会出现一个工具提示。
 
-请注意：当光标在 clock 子元素之间移动时，工具提示不会“一闪而过（blink）”。
+请注意：当鼠标指针在“时钟”的元素之间移动时，工具提示不会“闪烁”

From 87b7222c7df5535797532035e5c85907e2c26966 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Sun, 29 Mar 2020 14:43:49 +0800
Subject: [PATCH 18/18] Update solution.md

---
 .../2-hoverintent/solution.md                  | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md
index c23a46906f..8f0bde414d 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md
@@ -1,18 +1,18 @@
 
 算法看起来很简单：
-1. 将 `onmouseover/out` 处理器放在元素上。也可以在这里使用 `onmouseenter/leave`，但它们并不常用，而且如果我们使用委托，它们就会无效。
-2. 当鼠标光标进入元素时，开始测量 `mousemove` 上的速度。
+1. 将 `onmouseover/out` 处理程序放在元素上。在这里也可以使用 `onmouseenter/leave`，但是它们的通用性较差，如果我们想引入事件委托时，它则无法使用。
+2. 当鼠标指针进入元素时，开始测量 `mousemove` 上的速度。
 3. 如果速度慢，则运行 `over`。
-4. 之后如果离开了元素，而且 `over` 也被执行了，则运行 `out`。
+4. 当我们的鼠标指针要移出元素，并且 `over` 也执行了，则会运行 `out`。
 
-问题是：“如何测量速度？”
+但是如何测量速度？
 
-第一个想法是：每 `100ms` 运行一次我们的函数，并测量前一个坐标和新坐标之间的距离。如果它很小，那么速度就很小。
+第一个想法是：每 `100ms` 运行一次函数，并测量前坐标和新坐标之间的距离。如果很小，那么速度就很小。
 
-不幸的是，在 JavaScript 中无法获取“当前鼠标坐标”。没有像 `getCurrentMouseCoordinates()` 这样的函数。
+不幸的是，在 JavaScript 中无法获取“鼠标当前坐标”。没有像 `getCurrentMouseCoordinates()` 这样的函数。
 
-获取坐标的唯一方法是监听鼠标事件，就像 `mousemove`。
+获取坐标的唯一方法是监听例如 `mousemove` 这样的鼠标事件。
 
-因此我们可以在 `mousemove` 上设置一个处理器来跟踪坐标并记住它们。然后我们可以比较它们，每 `100ms` 比较一次。
+因此，我们可以在 `mousemove` 上设置一个处理程序来跟踪坐标并记住它们。然后我每 `100ms` 比较一次。
 
-P.S. 请注意：解决方案测试使用 `dispatchEvent` 来查看工具提示是否正确。
+P.S. 请注意：解决方案测试使用 `dispatchEvent` 来检查工具提示是否正确。