From a3de9c01935602d63ef09cf5023f1ecaf336fee2 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Wed, 25 Mar 2020 11:59:04 +0800
Subject: [PATCH 01/20] Update article.md

---
 .../01-introduction-browser-events/article.md | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 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 88eb7e8acb..e29f5ba0bc 100644
--- a/2-ui/2-events/01-introduction-browser-events/article.md
+++ b/2-ui/2-events/01-introduction-browser-events/article.md
@@ -1,44 +1,44 @@
 # 浏览器事件简介
 
-**事件**是某事发生的信号。所有的 DOM 节点都生成这样的信号（但事件不仅限于 DOM）。
+**事件** 是某事发生的信号。所有的 DOM 节点都生成这样的信号（但事件不仅限于 DOM）。
 
-这里有一张最有用的 DOM 事件列表，请看：
+这是最有用的 DOM 事件的列表，你可以浏览一下：
 
 **鼠标事件：**
-- `click` —— 当鼠标点击一个元素时（触摸屏设备在 tap 时生成）。
-- `contextmenu` —— 当鼠标右击一个元素时。
-- `mouseover` / `mouseout` —— 当鼠标光标移入或移出一个元素时。
-- `mousedown` / `mouseup` —— 当鼠标按下/释放一个元素时。
+- `click` —— 当鼠标点击一个元素时（触摸屏设备会在点击时生成）。
+- `contextmenu` —— 当鼠标右键点击一个元素时。
+- `mouseover` / `mouseout` —— 当鼠标光标移入/离开一个元素时。
+- `mousedown` / `mouseup` —— 当在元素上按下/释放鼠标按钮时。
 - `mousemove` —— 当鼠标移出时。
 
-**表单元素事件**：
+**表单（form）元素事件**：
 - `submit` —— 当访问者提交了一个 `<form>` 时。
-- `focus` —— 当访问者聚焦一个元素时，例如 `<input>`。
+- `focus` —— 当访问者聚焦于一个元素时，例如聚焦于一个 `<input>`。
 
 **键盘事件**：
-- `keydown` and `keyup` —— 当访问者按下然后松开按钮时。
+- `keydown` 和 `keyup` —— 当访问者按下然后松开按键时。
 
 **Document 事件**：
-- `DOMContentLoaded` —— 当加载和处理 HTML 时，DOM 将会被完整地构建。
+- `DOMContentLoaded` —— 当 HTML 的加载和处理均完成，DOM 被完全构建完成时。
 
 **CSS 事件**：
-- `transitionend` —— 当 CSS 动画完成时。
+- `transitionend` —— 当一个 CSS 动画完成时。
 
-还有许多其他事件。我们将在下一章中详细介绍具体事件。
+还有很多其他事件。我们将在下一章中详细介绍具体事件。
 
 ## 事件处理器
 
-为了响应事件，我们可以通过分发**处理器** —— 在事件发生时运行的函数。
+为了对事件作出响应，我们可以分配一个 **处理器（handler）**—— 一个在事件发生时运行的函数。
 
-处理器是在用户操作时运行 JavaScript 代码的一种方法。
+处理器是在发生用户操作（action）时运行 JavaScript 代码的一种方式。
 
-有许多分发处理器的方法。我们来看看，从最简单的开始。
+有几种分配处理器的方法。让我们来看看，从最简单的开始。
 
-### HTML 属性
+### HTML 特性
 
-处理器可以设置在 HTML 名为 `on<event>` 的属性中。
+处理器可以设置在 HTML 中名为 `on<event>` 的特性（attribute）中。
 
-例如，为 `input` 分发一个 `click` 处理器，我们就可以使用 `onclick`，就像这样；
+例如，要为一个 `input` 分配一个 `click` 处理器，我们可以使用 `onclick`，像这样；
 
 ```html run
 <input value="Click me" *!*onclick="alert('Click!')"*/!* type="button">

From 1709f2ca5adb7eb2e58ffb6104979f1ec5b105de Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Wed, 25 Mar 2020 12:34:19 +0800
Subject: [PATCH 02/20] Update article.md

---
 .../01-introduction-browser-events/article.md | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 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 e29f5ba0bc..f09c1de9c9 100644
--- a/2-ui/2-events/01-introduction-browser-events/article.md
+++ b/2-ui/2-events/01-introduction-browser-events/article.md
@@ -26,7 +26,7 @@
 
 还有很多其他事件。我们将在下一章中详细介绍具体事件。
 
-## 事件处理器
+## 事件处理程器
 
 为了对事件作出响应，我们可以分配一个 **处理器（handler）**—— 一个在事件发生时运行的函数。
 
@@ -46,11 +46,11 @@
 
 在鼠标单击时，`onclick` 中的代码就会运行。
 
-请注意在 `onclick` 中，我们使用单引号，因为属性本身是双引号。如果我们忘记了代码是在属性中而使用了双引号，比如这样：`onclick="alert("Click!")"`，那么它就无法正确运行。
+请注意，在 `onclick` 中，我们使用单引号，因为特性本身使用的是双引号。如果我们忘记了代码是在特性中的，而使用了双引号，像这样：`onclick="alert("Click!")"`，那么它就无法正确运行。
 
-使用 HTML 属性对于编写大量代码并不方便，因此我们最好创建一个 JavaScript 函数，然后在需要的地方调用。
+HTML 特性不是编写大量代码的好位置，因此我们最好创建一个 JavaScript 函数，然后在 HTML 特性中调用这个函数。
 
-在这里单击运行 `countRabbits()`：
+在这里单击会运行 `countRabbits()`：
 
 ```html autorun height=50
 <script>
@@ -64,13 +64,13 @@
 <input type="button" *!*onclick="countRabbits()"*/!* value="Count rabbits!">
 ```
 
-我们知道，HTML 属性名不区分大小写，因此 `ONCLICK` 和 `onClick` 以及 `onCLICK` 等都是一样可以运行的。但属性通常是小写的：`onclick`。
+我们知道，HTML 特性名是大小写不敏感的，所以 `ONCLICK` 和 `onClick` 以及 `onCLICK` 都一样可以运行。但是特性通常是小写的：`onclick`。
 
 ### DOM 属性
 
-我们可以使用 DOM 属性 `on<event>` 来分发处理器。
+我们可以使用 DOM 属性（property）`on<event>` 来分配处理器。
 
-比如 `elem.onclick`：
+例如 `elem.onclick`：
 
 ```html autorun
 <input id="elem" type="button" value="Click me">
@@ -83,13 +83,13 @@
 </script>
 ```
 
-如果使用 HTML 属性分发处理器，那么浏览器就会读取它，从属性内容中创建一个新函数并将其写入 DOM 属性。
+如果一个处理器是通过 HTML 特性（attribute）分配的，那么随后浏览器读取它，并从特性的内容创建一个新函数，并将这个函数写入 DOM 属性（property）。
 
-因此这个方法和之前的一样。
+因此，这种方法实际上与前一种方法相同。
 
-**处理器总是在 DOM 属性中：HTML 属性只是初始化它的方法之一**。
+**处理器总是在 DOM 属性中：HTML 特性只是初始化它的方法之一**。
 
-这两段的代码工作原理一致：
+这两段代码工作相同：
 
 1. 只有 HTML：
 
@@ -109,22 +109,22 @@
     </script>
     ```
 
-**因为只有一个 `onclick` 属性，因此我们不能分发多个事件处理器**。
+**因为这里只有一个 `onclick` 属性，所以我们无法分配更多事件处理器。**
 
-在下面的示例中，使用 JavaScript 添加一个处理器，重写现有的处理器：
+在下面这个示例中，我们使用 JavaScript 添加了一个处理器，重写了已有的处理器：
 
 ```html run height=50 autorun
 <input type="button" id="elem" onclick="alert('Before')" value="Click me">
 <script>
 *!*
-  elem.onclick = function() { // overwrites the existing handler
-    alert('After'); // only this will be shown
+  elem.onclick = function() { // 重写了已有的处理器
+    alert('After'); // 只会显示此内容
   };
 */!*
 </script>
 ```
 
-顺便说一下，我们可以直接将现有函数指定为处理器：
+顺便说一下，我们可以直接将已有的函数指定为处理器：
 
 ```js
 function sayThanks() {
@@ -134,7 +134,7 @@ function sayThanks() {
 elem.onclick = sayThanks;
 ```
 
-移除处理器 —— 分发 `elem.onclick = null`。
+要移除一个处理器 —— 赋值 `elem.onclick = null`。
 
 ## 访问元素：this
 

From 049aed8a70a00541613475bf6b2772609ed80881 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Wed, 25 Mar 2020 13:47:10 +0800
Subject: [PATCH 03/20] Update article.md

---
 .../01-introduction-browser-events/article.md | 122 ++++++++----------
 1 file changed, 54 insertions(+), 68 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 f09c1de9c9..af80338672 100644
--- a/2-ui/2-events/01-introduction-browser-events/article.md
+++ b/2-ui/2-events/01-introduction-browser-events/article.md
@@ -111,20 +111,20 @@ HTML 特性不是编写大量代码的好位置，因此我们最好创建一个
 
 **因为这里只有一个 `onclick` 属性，所以我们无法分配更多事件处理器。**
 
-在下面这个示例中，我们使用 JavaScript 添加了一个处理器，重写了已有的处理器：
+在下面这个示例中，我们使用 JavaScript 添加了一个处理器，覆盖了现有的处理器：
 
 ```html run height=50 autorun
 <input type="button" id="elem" onclick="alert('Before')" value="Click me">
 <script>
 *!*
-  elem.onclick = function() { // 重写了已有的处理器
+  elem.onclick = function() { // 覆盖了现有的处理器
     alert('After'); // 只会显示此内容
   };
 */!*
 </script>
 ```
 
-顺便说一下，我们可以直接将已有的函数指定为处理器：
+顺便说一下，我们可以直接将现有的函数指定为处理器：
 
 ```js
 function sayThanks() {
@@ -138,9 +138,9 @@ elem.onclick = sayThanks;
 
 ## 访问元素：this
 
-处理器中的 `this` 的值是元素。上面有处理器的那个。
+处理器中的 `this` 的值是对应的元素。就是处理器所在的那个元素。
 
-下述代码中，`button` 使用 `this.innerHTML` 来显示内容：
+下面这行代码中的 `button` 使用 `this.innerHTML` 来显示它的内容：
 
 ```html height=50 autorun
 <button onclick="alert(this.innerHTML)">Click me</button>
@@ -148,75 +148,75 @@ elem.onclick = sayThanks;
 
 ## 可能出现的错误
 
-如果你刚开始处理事件 —— 请注意一些微妙的地方。
+如果你刚开始写事件 —— 请注意一些细微之处。
 
-**函数应该作为 `sayThanks` 进行分发，而不是 `sayThanks()`**。
+**函数应该被以 `sayThanks` 的形式进行非配，而不是 `sayThanks()`**。
 
 ```js
-// right
+// 正确
 button.onclick = sayThanks;
 
-// wrong
+// 错误
 button.onclick = sayThanks();
 ```
 
-如果我们添加括号，那么就是 `sayThanks()` —— 将是函数执行的**结果**，所以最后一行代码中的 `onclick` 变成了 `undefined`（函数返回的内容将什么也没有）。这是不可取的。
+如果我们添加了括号 `sayThanks()` —— 这是一个函数调用。所以，最后一行代码实际上获得的是函数执行的 **结果**，即 `undefined`（因为这个函数没有返回值）。此代码不会工作。
 
-...但在标记中，我们确实需要括号：
+……但在标记（markup，译注：也就是 HTML 标签）中，我们确实需要括号：
 
 ```html
 <input type="button" id="button" onclick="sayThanks()">
 ```
 
-这个区别很容易解释。当浏览器读取属性时，它会从其内容中创建一个处理器函数。
+这个区别很容易解释。当浏览器读取 HTML 特性（attribute）时，浏览器将会使用 **特性中的内容** 创建一个处理函数：`sayThanks()`。
 
-所以最后的示例相同：
+所以，标记会生成下面这个属性：
 ```js
 button.onclick = function() {
 *!*
-  sayThanks(); // the attribute content
+  sayThanks(); // 特性中的内容
 */!*
 };
 ```
 
-**使用函数，而不是字符串**。
+**使用函数，而不是字符串。**
 
-`elem.onclick = "alert(1)"` 也可以执行，这适用于兼容性原因，但是强烈建议不使用这种方式。
+`elem.onclick = "alert(1)"` 也可以执行。它能执行是出于兼容性，但强烈建议不要使用这种方式。
 
-**不要为处理器使用 `setAttribute`**。
+**不要对处理器使用 `setAttribute`。**
 
 这样的调用会失效：
 
 ```js run no-beautify
-// 单击 <body> 将产生错误,
-// 因为属性总是字符串，函数就变成了字符串。
+// 单击 <body> 将产生 error，
+// 因为特性总是字符串的，函数变成了一个字符串
 document.body.setAttribute('onclick', function() { alert(1) });
 ```
 
-**DOM 属性大小写的重要性**。
+**DOM 属性是大小写敏感的。**
 
-为 `elem.onclick` 分发处理器，而不是 `elem.ONCLICK`，因为 DOM 属性是大小写敏感的。
+将处理器分配给 `elem.onclick`，而不是 `elem.ONCLICK`，因为 DOM 属性是大小写敏感的。
 
 ## addEventListener
 
-前面提到分发处理器的基本问题是 —— 我们不能为一个事件分发多个处理器。
+上述分配处理器的方式的根本问题是 —— 我们不能为一个事件分配多个处理器。
 
-例如，我们代码的一部分希望在单击时高亮显示按钮，另一部分希望显示消息。
+例如，在我们点击了一个按钮时，我们代码中的一部分想要高亮显示这个按钮，另一部分则想要显示一条消息。
 
-我们想为此分发两个处理器。但是一个新的 DOM 属性将重写现有的 DOM 属性：
+我们想为此事件分配两个处理器。但是，新的 DOM 属性将覆盖现有的 DOM 属性：
 
 ```js no-beautify
 input.onclick = function() { alert(1); }
 // ...
-input.onclick = function() { alert(2); } // replaces the previous handler
+input.onclick = function() { alert(2); } // 替换了前一个处理器
 ```
 
-Web 标准的开发者很久之前就明白了这一点，并提出了一种使用特殊方法 `addEventListener` 和 `removeEventListener` 来管理处理器的替代方法。它们没有这样的问题。
+Web 标准的开发者很早就了解到了这一点，并提出了一种使用特殊方法 `addEventListener` 和 `removeEventListener` 来管理处理器的替代方法。它们没有这样的问题。
 
 添加处理器的语法：
 
 ```js
-element.addEventListener(event, handler[, phase]);
+element.addEventListener(event, handler, [options]);
 ```
 
 `event`
@@ -225,19 +225,21 @@ element.addEventListener(event, handler[, phase]);
 `handler`
 : 处理器函数。
 
-`phase`
-: 一个可选的参数，即处理器的工作“阶段”。之后会讨论。我们通常不会使用它。
+`options`
+: 具有以下属性的附加可选对象：
+    - `once`：如果为 `true`，那么会在被触发后自动删除监听器。
+    - `capture`：事件处理的阶段，我们稍后将在 <info:bubbling-and-capturing> 一章中介绍。由于历史原因，`options` 也可以是 `false/true`，它与 `{capture: false/true}` 相同。
+    - `passive`：如果为 `true`，那么处理器将不会 `preventDefault()`，我们稍后将在 <info:default-browser-action> 一章中介绍。
 
-使用 `removeEventListener` 移除处理器：
 
+要移除处理器，可以使用 `removeEventListener`：
 
 ```js
-// exactly the same arguments as addEventListener
-element.removeEventListener(event, handler[, phase]);
+element.removeEventListener(event, handler, [options]);
 ```
 
-````warn header="Removal requires the same function"
-要移除处理器，我们需要传入与分发函数完全相同的函数。
+````warn header="移除需要相同的函数"
+要移除处理器，我们需要传入与分配的函数完全相同的函数。
 
 这不起作用：
 
@@ -247,9 +249,9 @@ elem.addEventListener( "click" , () => alert('Thanks!'));
 elem.removeEventListener( "click", () => alert('Thanks!'));
 ```
 
-处理器不会被移除，因为 `removeEventListener` 将获取另一个函数 —— 相同的代码，但这并不起作用。
+处理器不会被移除，因为 `removeEventListener` 获取了另一个函数 —— 使用相同的代码，但这并不起作用。
 
-以下是正确方法：
+下面是正确方法：
 
 ```js
 function handler() {
@@ -261,10 +263,10 @@ input.addEventListener("click", handler);
 input.removeEventListener("click", handler);
 ```
 
-请注意 —— 如果我们不将函数存储在一个变量中，那么我们就无法移除它。由 `addEventListener` 分发的处理器将无法“读回”。
+请注意 —— 如果我们不将函数存储在一个变量中，那么我们就无法移除它。由 `addEventListener` 分配的处理器将无法被“读回”。
 ````
 
-多次调用 `addEventListener` 允许添加多个处理器，就像这样：
+多次调用 `addEventListener` 允许添加多个处理器，如下所示：
 
 ```html run no-beautify
 <input id="elem" type="button" value="Click me"/>
@@ -286,41 +288,25 @@ input.removeEventListener("click", handler);
 </script>
 ```
 
-正如我们在以上所看到的那样，我们可以使用 DOM 属性**和** `addEventListener` 来设置处理器。但通常我们只使用其中一种方法。
+正如我们在上面这个例子中所看到的，我们可以 **同时** 使用 DOM 属性和 `addEventListener` 来设置处理器。但通常我们只使用其中一种方式。
 
-````warn header="有些事件处理器只能通过 `addEventListener` 设置"
-有些事件不能通过 DOM 属性分配。必须使用 `addEventListener`。
+````warn header="对于某些事件，只能通过 `addEventListener` 设置处理器"
+有些事件无法通过 DOM 属性进行分配。必须使用 `addEventListener`。
 
-事件 `transitionend`（CSS 动画完成）就是如此。
+例如，`DOMContentLoaded` 事件，该事件在文档加载完成并且 DOM 构建完成时触发。
 
-尝试以下代码，大多数浏览器中只有第二个处理器正常运行，而不是第一个。
-
-```html run
-<style>
-  input {
-    transition: width 1s;
-    width: 100px;
-  }
-
-  .wide {
-    width: 300px;
-  }
-</style>
-
-<input type="button" id="elem" onclick="this.classList.toggle('wide')" value="Click me">
-
-<script>
-  elem.ontransitionend = function() {
-    alert("DOM property"); // doesn't work
-  };
+```js
+document.onDOMContentLoaded = function() {
+  alert("DOM built"); // 永远不会运行
+};
+```
 
-*!*
-  elem.addEventListener("transitionend", function() {
-    alert("addEventListener"); // 动画完成时显示
-  });
-*/!*
-</script>
+```js
+document.addEventListener("DOMContentLoaded", function() {
+  alert("DOM built"); // 这种方式可以运行
+});
 ```
+所以 `addEventListener` 更通用。虽然这样的事件是特例而不是规则。
 ````
 
 ## 事件对象

From 502efb3ffb9376fc7ce31be2694df4e72d941899 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Wed, 25 Mar 2020 14:19:41 +0800
Subject: [PATCH 04/20] Update article.md

---
 .../01-introduction-browser-events/article.md | 108 +++++++++---------
 1 file changed, 54 insertions(+), 54 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 af80338672..5ea58eecaf 100644
--- a/2-ui/2-events/01-introduction-browser-events/article.md
+++ b/2-ui/2-events/01-introduction-browser-events/article.md
@@ -28,17 +28,17 @@
 
 ## 事件处理程器
 
-为了对事件作出响应，我们可以分配一个 **处理器（handler）**—— 一个在事件发生时运行的函数。
+为了对事件作出响应，我们可以分配一个 **处理程序（handler）**—— 一个在事件发生时运行的函数。
 
-处理器是在发生用户操作（action）时运行 JavaScript 代码的一种方式。
+处理程序是在发生用户操作（action）时运行 JavaScript 代码的一种方式。
 
-有几种分配处理器的方法。让我们来看看，从最简单的开始。
+有几种分配处理程序的方法。让我们来看看，从最简单的开始。
 
 ### HTML 特性
 
-处理器可以设置在 HTML 中名为 `on<event>` 的特性（attribute）中。
+处理程序可以设置在 HTML 中名为 `on<event>` 的特性（attribute）中。
 
-例如，要为一个 `input` 分配一个 `click` 处理器，我们可以使用 `onclick`，像这样；
+例如，要为一个 `input` 分配一个 `click` 处理程序，我们可以使用 `onclick`，像这样；
 
 ```html run
 <input value="Click me" *!*onclick="alert('Click!')"*/!* type="button">
@@ -68,7 +68,7 @@ HTML 特性不是编写大量代码的好位置，因此我们最好创建一个
 
 ### DOM 属性
 
-我们可以使用 DOM 属性（property）`on<event>` 来分配处理器。
+我们可以使用 DOM 属性（property）`on<event>` 来分配处理程序。
 
 例如 `elem.onclick`：
 
@@ -83,11 +83,11 @@ HTML 特性不是编写大量代码的好位置，因此我们最好创建一个
 </script>
 ```
 
-如果一个处理器是通过 HTML 特性（attribute）分配的，那么随后浏览器读取它，并从特性的内容创建一个新函数，并将这个函数写入 DOM 属性（property）。
+如果一个处理程序是通过 HTML 特性（attribute）分配的，那么随后浏览器读取它，并从特性的内容创建一个新函数，并将这个函数写入 DOM 属性（property）。
 
 因此，这种方法实际上与前一种方法相同。
 
-**处理器总是在 DOM 属性中：HTML 特性只是初始化它的方法之一**。
+**处理程序总是在 DOM 属性中：HTML 特性只是初始化它的方法之一**。
 
 这两段代码工作相同：
 
@@ -109,22 +109,22 @@ HTML 特性不是编写大量代码的好位置，因此我们最好创建一个
     </script>
     ```
 
-**因为这里只有一个 `onclick` 属性，所以我们无法分配更多事件处理器。**
+**因为这里只有一个 `onclick` 属性，所以我们无法分配更多事件处理程序。**
 
-在下面这个示例中，我们使用 JavaScript 添加了一个处理器，覆盖了现有的处理器：
+在下面这个示例中，我们使用 JavaScript 添加了一个处理程序，覆盖了现有的处理程序：
 
 ```html run height=50 autorun
 <input type="button" id="elem" onclick="alert('Before')" value="Click me">
 <script>
 *!*
-  elem.onclick = function() { // 覆盖了现有的处理器
+  elem.onclick = function() { // 覆盖了现有的处理程序
     alert('After'); // 只会显示此内容
   };
 */!*
 </script>
 ```
 
-顺便说一下，我们可以直接将现有的函数指定为处理器：
+顺便说一下，我们可以直接将现有的函数指定为处理程序：
 
 ```js
 function sayThanks() {
@@ -134,11 +134,11 @@ function sayThanks() {
 elem.onclick = sayThanks;
 ```
 
-要移除一个处理器 —— 赋值 `elem.onclick = null`。
+要移除一个处理程序 —— 赋值 `elem.onclick = null`。
 
 ## 访问元素：this
 
-处理器中的 `this` 的值是对应的元素。就是处理器所在的那个元素。
+处理程序中的 `this` 的值是对应的元素。就是处理程序所在的那个元素。
 
 下面这行代码中的 `button` 使用 `this.innerHTML` 来显示它的内容：
 
@@ -183,7 +183,7 @@ button.onclick = function() {
 
 `elem.onclick = "alert(1)"` 也可以执行。它能执行是出于兼容性，但强烈建议不要使用这种方式。
 
-**不要对处理器使用 `setAttribute`。**
+**不要对处理程序使用 `setAttribute`。**
 
 这样的调用会失效：
 
@@ -195,25 +195,25 @@ document.body.setAttribute('onclick', function() { alert(1) });
 
 **DOM 属性是大小写敏感的。**
 
-将处理器分配给 `elem.onclick`，而不是 `elem.ONCLICK`，因为 DOM 属性是大小写敏感的。
+将处理程序分配给 `elem.onclick`，而不是 `elem.ONCLICK`，因为 DOM 属性是大小写敏感的。
 
 ## addEventListener
 
-上述分配处理器的方式的根本问题是 —— 我们不能为一个事件分配多个处理器。
+上述分配处理程序的方式的根本问题是 —— 我们不能为一个事件分配多个处理程序。
 
 例如，在我们点击了一个按钮时，我们代码中的一部分想要高亮显示这个按钮，另一部分则想要显示一条消息。
 
-我们想为此事件分配两个处理器。但是，新的 DOM 属性将覆盖现有的 DOM 属性：
+我们想为此事件分配两个处理程序。但是，新的 DOM 属性将覆盖现有的 DOM 属性：
 
 ```js no-beautify
 input.onclick = function() { alert(1); }
 // ...
-input.onclick = function() { alert(2); } // 替换了前一个处理器
+input.onclick = function() { alert(2); } // 替换了前一个处理程序
 ```
 
-Web 标准的开发者很早就了解到了这一点，并提出了一种使用特殊方法 `addEventListener` 和 `removeEventListener` 来管理处理器的替代方法。它们没有这样的问题。
+Web 标准的开发者很早就了解到了这一点，并提出了一种使用特殊方法 `addEventListener` 和 `removeEventListener` 来管理处理程序的替代方法。它们没有这样的问题。
 
-添加处理器的语法：
+添加处理程序的语法：
 
 ```js
 element.addEventListener(event, handler, [options]);
@@ -223,23 +223,23 @@ element.addEventListener(event, handler, [options]);
 : 事件名，例如：`"click"`。
 
 `handler`
-: 处理器函数。
+: 处理函数。
 
 `options`
 : 具有以下属性的附加可选对象：
     - `once`：如果为 `true`，那么会在被触发后自动删除监听器。
     - `capture`：事件处理的阶段，我们稍后将在 <info:bubbling-and-capturing> 一章中介绍。由于历史原因，`options` 也可以是 `false/true`，它与 `{capture: false/true}` 相同。
-    - `passive`：如果为 `true`，那么处理器将不会 `preventDefault()`，我们稍后将在 <info:default-browser-action> 一章中介绍。
+    - `passive`：如果为 `true`，那么处理程序将不会 `preventDefault()`，我们稍后将在 <info:default-browser-action> 一章中介绍。
 
 
-要移除处理器，可以使用 `removeEventListener`：
+要移除处理程序，可以使用 `removeEventListener`：
 
 ```js
 element.removeEventListener(event, handler, [options]);
 ```
 
 ````warn header="移除需要相同的函数"
-要移除处理器，我们需要传入与分配的函数完全相同的函数。
+要移除处理程序，我们需要传入与分配的函数完全相同的函数。
 
 这不起作用：
 
@@ -249,7 +249,7 @@ elem.addEventListener( "click" , () => alert('Thanks!'));
 elem.removeEventListener( "click", () => alert('Thanks!'));
 ```
 
-处理器不会被移除，因为 `removeEventListener` 获取了另一个函数 —— 使用相同的代码，但这并不起作用。
+处理程序不会被移除，因为 `removeEventListener` 获取了另一个函数 —— 使用相同的代码，但这并不起作用。
 
 下面是正确方法：
 
@@ -263,10 +263,10 @@ input.addEventListener("click", handler);
 input.removeEventListener("click", handler);
 ```
 
-请注意 —— 如果我们不将函数存储在一个变量中，那么我们就无法移除它。由 `addEventListener` 分配的处理器将无法被“读回”。
+请注意 —— 如果我们不将函数存储在一个变量中，那么我们就无法移除它。由 `addEventListener` 分配的处理程序将无法被“读回”。
 ````
 
-多次调用 `addEventListener` 允许添加多个处理器，如下所示：
+多次调用 `addEventListener` 允许添加多个处理程序，如下所示：
 
 ```html run no-beautify
 <input id="elem" type="button" value="Click me"/>
@@ -288,9 +288,9 @@ input.removeEventListener("click", handler);
 </script>
 ```
 
-正如我们在上面这个例子中所看到的，我们可以 **同时** 使用 DOM 属性和 `addEventListener` 来设置处理器。但通常我们只使用其中一种方式。
+正如我们在上面这个例子中所看到的，我们可以 **同时** 使用 DOM 属性和 `addEventListener` 来设置处理程序。但通常我们只使用其中一种方式。
 
-````warn header="对于某些事件，只能通过 `addEventListener` 设置处理器"
+````warn header="对于某些事件，只能通过 `addEventListener` 设置处理程序"
 有些事件无法通过 DOM 属性进行分配。必须使用 `addEventListener`。
 
 例如，`DOMContentLoaded` 事件，该事件在文档加载完成并且 DOM 构建完成时触发。
@@ -311,18 +311,18 @@ document.addEventListener("DOMContentLoaded", function() {
 
 ## 事件对象
 
-为了正确处理事件，我们需要知道更多关于事件内容的细节。不仅仅是 "click" 或者 "keypress"，而是指针坐标在哪而？哪个键被按了？等等。
+为了正确处理事件，我们需要更深入地了解发生了什么。不仅仅是 "click" 或 "keypress"，还包括鼠标光标的坐标是什么？按下了哪个键？等等。
 
-当事件发生时，浏览器会创建一个**事件对象**，将信息放入其中，并将其作为参数传入处理器。
+当事件发生时，浏览器会创建一个 **`event` 对象**，将详细信息放入其中，并将其作为参数传递给处理程序。
 
-以下是从事件对象获取鼠标坐标的示例：
+下面是一个从 `event` 对象获取鼠标坐标的示例：
 
 ```html run
 <input type="button" value="Click me" id="elem">
 
 <script>
   elem.onclick = function(*!*event*/!*) {
-    // 显示事件类型、元素和单击的坐标。
+    // 显示事件类型、元素和点击的坐标
     alert(event.type + " at " + event.currentTarget);
     alert("Coordinates: " + event.clientX + ":" + event.clientY);
   };
@@ -335,27 +335,27 @@ document.addEventListener("DOMContentLoaded", function() {
 : 事件类型，这里是 `"click"`。
 
 `event.currentTarget`
-: 处理事件的元素。这与 `this` 相同，除非你将 `this` 绑定到其他东西上，之后 `event.currentTarget` 就会有效了。
+: 处理事件的元素。这与 `this` 相同，除非处理程序是一个箭头函数，或者它的 `this` 被绑定到了其他东西上，之后我们就可以从 `event.currentTarget` 获取元素了。
 
 `event.clientX / event.clientY`
-: 鼠标事件中光标相对于窗口的坐标。
+: 鼠标事件的光标的窗口相对坐标。
 
-还有更多属性。他们取决于事件类型，因此我们稍后将在详细讨论不同事件时来研究它们。
+还有很多属性。它们取决于事件类型，因此，稍后我们将详细讨论不同事件，那时我们再对其进行详细研究。
 
-````smart header="事件对象也可以从 HTML 访问"
-如果我们在 HTML 中分发一个处理器，我们也可以使用 `event` 对象，如下所示：
+````smart header="也可以从 HTML 中访问 `event` 对象"
+如果我们在 HTML 中分配了一个处理程序，那么我们也可以使用 `event` 对象，像这样：
 
 ```html autorun height=60
 <input type="button" onclick="*!*alert(event.type)*/!*" value="Event type">
 ```
 
-这是可能的，因为当浏览器读取属性时，它会创建如下所示的处理器：`function(event) { alert(event.type) }`。也就是说：它的第一个参数是 `"event"`，而主体则来自于属性。
+这是可能的，因为当浏览器读取特性（attribute）时，它会创建像这样的处理程序：`function(event) { alert(event.type) }`。也就是说：它的第一个参数是 `"event"`，而主体取自于该特性（attribute）。
 ````
 
 
-## 对象处理器：handleEvent
+## 对象处理程序：handleEvent
 
-我们可以使用 `addEventListener` 将对象赋值为事件处理器。当事件发生时，它的 `handleEvent` 方法就会和它一起被调用。
+我们不仅可以分配函数，还可以使用 `addEventListener` 将一个对象分配为事件处理程序。当事件发生时，就会调用该对象的 `handleEvent` 方法。
 
 例如：
 
@@ -372,9 +372,9 @@ document.addEventListener("DOMContentLoaded", function() {
 </script>
 ```
 
-换句话说，当 `addEventListener` 接收一个对象作为处理器时候，就会调用 `object.handleEvent(event)` 来处理事件。
+正如我们所看到的，当 `addEventListener` 接收一个对象作为处理程序时，在事件发生时，它就会调用 `object.handleEvent(event)` 来处理事件。
 
-我们也可以使用一个类：
+我们也可以对此使用一个类：
 
 
 ```html run
@@ -402,9 +402,9 @@ document.addEventListener("DOMContentLoaded", function() {
 </script>
 ```
 
-这里的同一对象会处理两个事件。请注意，我们需要使用 `addEventListener` 来指明要监听的事件。`menu` 对象在这里只监听 `mousedown` 和 `mouseup`，而不是任意其他类型的事件。
+这里，同一个对象处理两个事件。请注意，我们需要使用 `addEventListener` 来显示设置事件，以指明要监听的事件。这里的 `menu` 对象只监听 `mousedown` 和 `mouseup`，而没有任何其他类型的事件。
 
-`handleEvent` 方法本身不会做所有的工作。它可以调用其他用于特定事件的方法，比如：
+`handleEvent` 方法不必通过自身完成所有的工作。它可以调用其他特定于事件的方法，例如：
 
 ```html run
 <button id="elem">Click me</button>
@@ -432,21 +432,21 @@ document.addEventListener("DOMContentLoaded", function() {
 </script>
 ```
 
-现在事件处理器是完全独立的，这样会更容易被支持。
+现在事件处理程序已经明确地分离了出来，这样更容易进行代码编写和后续维护。
 
 ## 总结
 
-有 3 种方法可以分发事件处理器：
+这里有 3 种分配事件处理程序的方法：
 
-1. HTML 属性：`onclick="..."`。
-2. DOM 属性 `elem.onclick = function`。
-3. 方法：添加 `elem.addEventListener(event, handler[, phase])`，移除 `removeEventListener`。
+1. HTML 特性（attribute）：`onclick="..."`。
+2. DOM 属性（property）：`elem.onclick = function`。
+3. 方法（method）：`elem.addEventListener(event, handler, [phase])` 用于添加，`removeEventListener` 用于移除。
 
-HTML 属性很少使用，因为 HTML 标签中的 JavaScript 看起来奇怪又陌生。而且也不能在里面写太多的代码。
+HTML 特性很少使用，因为 HTML 标签中的 JavaScript 看起来有些奇怪且陌生。而且也不能在里面写太多代码。
 
-DOM 属性可以使用，但我们不能为特定事件分发多个处理器。在许多场景中，这种限制并不严重。
+DOM 属性用起来还可以，但我们无法为特定事件分配多个处理程序。在许多场景中，这种限制并不紧迫。
 
-最后一种方法是最灵活的，但也是编写内容最多的。有少数事件只能使用这种方式。例如 `transtionend` 和 `DOMContentLoaded`（有待讨论）。当然 `addEventListener` 也支持对象作为事件处理器。在这种场景下，事件发生时就需要调用 `handleEvent` 方法。
+最后一种方法是最灵活的，但也是写起来最长的。有少数事件只能使用这种方式。例如 `transtionend` 和 `DOMContentLoaded`（有待讨论）。当然 `addEventListener` 也支持对象作为事件处理器。在这种场景下，事件发生时就需要调用 `handleEvent` 方法。
 
 无论你如何分发处理器 —— 它都会将事件对象作为第一个参数。该对象包含事件发生的细节。
 

From cd9fb7ea20b6e621c5a10ea3c950c3e79e55f95e Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Wed, 25 Mar 2020 14:47:44 +0800
Subject: [PATCH 05/20] Update article.md

---
 2-ui/2-events/01-introduction-browser-events/article.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 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 5ea58eecaf..3b0f034e9c 100644
--- a/2-ui/2-events/01-introduction-browser-events/article.md
+++ b/2-ui/2-events/01-introduction-browser-events/article.md
@@ -436,7 +436,7 @@ document.addEventListener("DOMContentLoaded", function() {
 
 ## 总结
 
-这里有 3 种分配事件处理程序的方法：
+这里有 3 种分配事件处理程序的方式：
 
 1. HTML 特性（attribute）：`onclick="..."`。
 2. DOM 属性（property）：`elem.onclick = function`。
@@ -446,8 +446,8 @@ HTML 特性很少使用，因为 HTML 标签中的 JavaScript 看起来有些奇
 
 DOM 属性用起来还可以，但我们无法为特定事件分配多个处理程序。在许多场景中，这种限制并不紧迫。
 
-最后一种方法是最灵活的，但也是写起来最长的。有少数事件只能使用这种方式。例如 `transtionend` 和 `DOMContentLoaded`（有待讨论）。当然 `addEventListener` 也支持对象作为事件处理器。在这种场景下，事件发生时就需要调用 `handleEvent` 方法。
+最后一种方式是最灵活的，但也是写起来最长的。有少数事件只能使用这种方式。例如 `transtionend` 和 `DOMContentLoaded`（上文中讲到了）。`addEventListener` 也支持对象作为事件处理程序。在这种情况下，如果发生事件，则会调用 `handleEvent` 方法。
 
-无论你如何分发处理器 —— 它都会将事件对象作为第一个参数。该对象包含事件发生的细节。
+无论你如何分类处理程序 —— 它都会将获得一个事件对象作为第一个参数。该对象包含有关所发生事件的详细信息。
 
-我们将在下一章了解更多关于一般事件和不同类型事件的内容。
+在下一章中，我们将学习更多关于一般事件和不同类型事件的内容。

From 9d18ed94f59bad75ad09127c652c12779e5d42f8 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Wed, 25 Mar 2020 14:50:08 +0800
Subject: [PATCH 06/20] Update article.md

---
 2-ui/2-events/01-introduction-browser-events/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 3b0f034e9c..6401741cb4 100644
--- a/2-ui/2-events/01-introduction-browser-events/article.md
+++ b/2-ui/2-events/01-introduction-browser-events/article.md
@@ -444,7 +444,7 @@ document.addEventListener("DOMContentLoaded", function() {
 
 HTML 特性很少使用，因为 HTML 标签中的 JavaScript 看起来有些奇怪且陌生。而且也不能在里面写太多代码。
 
-DOM 属性用起来还可以，但我们无法为特定事件分配多个处理程序。在许多场景中，这种限制并不紧迫。
+DOM 属性用起来还可以，但我们无法为特定事件分配多个处理程序。在许多场景中，这种限制并不严重。
 
 最后一种方式是最灵活的，但也是写起来最长的。有少数事件只能使用这种方式。例如 `transtionend` 和 `DOMContentLoaded`（上文中讲到了）。`addEventListener` 也支持对象作为事件处理程序。在这种情况下，如果发生事件，则会调用 `handleEvent` 方法。
 

From 6ae9dcf7e51593d607b6e595f8f0f0577c974a2e Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Wed, 25 Mar 2020 14:53:01 +0800
Subject: [PATCH 07/20] Update task.md

---
 .../01-introduction-browser-events/01-hide-other/task.md        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md b/2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md
index 121e42fef3..2d81bf5155 100644
--- a/2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md
+++ b/2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md
@@ -4,7 +4,7 @@ importance: 5
 
 # 点击隐藏
 
-为 `button` 添加 JavaScript ，使我们在点击的时候让 `<div id="text">` 消失。
+为 `button` 添加 JavaScript 代码，使得 `<div id="text">` 在我们点击该按钮时消失。
 
 示例：
 

From 8844cd35de7b728e986414d8ba8a9947d032e018 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Wed, 25 Mar 2020 15:15:03 +0800
Subject: [PATCH 08/20] Update task.md

---
 .../01-introduction-browser-events/02-hide-self-onclick/task.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md
index f02ff6ea24..b914e5178c 100644
--- a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md
+++ b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md
@@ -4,7 +4,7 @@ importance: 5
 
 # 隐藏自己
 
-创建一个按钮，在单击时，隐藏自己。
+创建一个按钮，在被单击时，隐藏自己。
 
 ```online
 就像这样：

From 0f9fa7ef337ac4033bf70696c4f7c9c79f341be1 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Wed, 25 Mar 2020 15:16:15 +0800
Subject: [PATCH 09/20] Update solution.md

---
 .../02-hide-self-onclick/solution.md                            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md
index c9fa4993f9..ff6d483b44 100644
--- a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md
+++ b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md
@@ -1,4 +1,4 @@
-可以在处理器中使用 `this` 来引用自身：
+可以在处理程序中使用 `this` 来引用“元素自身”：
 
 ```html run height=50
 <input type="button" onclick="this.hidden=true" value="Click to hide">

From e45dcae02dc5937a04295edc9dcb381265c7d1b5 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Wed, 25 Mar 2020 15:29:02 +0800
Subject: [PATCH 10/20] Update task.md

---
 .../03-which-handlers-run/task.md                           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md
index ab20c3874b..3c5d30e7f8 100644
--- a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md
+++ b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md
@@ -2,11 +2,11 @@ importance: 5
 
 ---
 
-# 哪一个处理器会运行？
+# 哪个处理程序会运行？
 
-变量中有一个按钮，上面没有处理器。
+在变量中有一个按钮。它上面没有处理程序。
 
-在下面代码之后单击哪些处理器会运行？会出现哪些警报？
+在以下代码之后，哪些处理程序会在按钮被点击时运行？会显示哪些 alert？
 
 ```js no-beautify
 button.addEventListener("click", () => alert("1"));

From 07d4a260814ae2cc0f372ed610faec2723079a2e Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Wed, 25 Mar 2020 15:37:38 +0800
Subject: [PATCH 11/20] Update task.md

---
 .../03-which-handlers-run/task.md                               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md
index 3c5d30e7f8..63b190801f 100644
--- a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md
+++ b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md
@@ -6,7 +6,7 @@ importance: 5
 
 在变量中有一个按钮。它上面没有处理程序。
 
-在以下代码之后，哪些处理程序会在按钮被点击时运行？会显示哪些 alert？
+执行以下代码之后，哪些处理程序会在按钮被点击时运行？会显示哪些 alert？
 
 ```js no-beautify
 button.addEventListener("click", () => alert("1"));

From f8da0dec0e2c05a0aefa0ce7da0899dedcd14165 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Wed, 25 Mar 2020 15:40:53 +0800
Subject: [PATCH 12/20] Update solution.md

---
 .../03-which-handlers-run/solution.md                       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md
index a484489f2a..2b4a836a98 100644
--- a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md
+++ b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md
@@ -1,8 +1,8 @@
 答案：`1` 和 `2`。
 
-第一个处理器会触发，因为它没有被 `removeEventListener` 移除。要移除处理器，我们需要传递正确分发的函数。在代码中，传递了一个新的函数，看起来相同，但仍然是另一个函数。
+第一个处理程序会触发，因为它没有被 `removeEventListener` 移除。要移除处理程序，我们需要传递正确的所分配的函数。在代码中，传递了一个新的函数，该函数看起来相同，但仍然是另一个函数。
 
-要移除函数对象，我们需要存储对它的引用，就像这样：
+要移除一个函数对象，我们需要存储对它的引用，像这样：
 
 ```js
 function handler() {
@@ -13,4 +13,4 @@ button.addEventListener("click", handler);
 button.removeEventListener("click", handler);
 ```
 
-处理器 `button.onclick` 独立于 `addEventListener` 之外工作。
+无论 `addEventListener` 怎样，`button.onclick` 处理程序都会触发。

From 0791d19b2ce26e1d954739c5ff99ebfa9da68e30 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Wed, 25 Mar 2020 15:48:28 +0800
Subject: [PATCH 13/20] Update task.md

---
 .../04-move-ball-field/task.md                         | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md
index a4088783a4..bb7469706f 100644
--- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md
+++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md
@@ -4,18 +4,18 @@ importance: 5
 
 # 让球在球场中移动
 
-单击一下让球在球场中移动。就像这样：
+单击球场中任意一点，让球在球场中移动。就像这样：
 
 [iframe src="solution" height="260" link]
 
 要求：
 
-- 球的中心应该准确的在单击时指针位置的下方(如果可能的话，不越过球场边缘)。
-- CSS 动画很受欢迎。
+- 球的中心应该恰好在单击时指针位置的下方（如果在球不越过球场边缘的情况下，能实现的话）。
+- 最好添加一些 CSS 动画。
 - 球不能越过场地边界。
-- 当页面被滚动时，任何东西都不应该中断。
+- 页面滚动时，不会有任何中断。
 
 注意：
 
-- 代码还应该能在不同的球和球场大小中工作，而不是绑定到任何固定的值。
+- 代码还应该适用于不同大小的球和球场，而不应该绑定到任何固定值。
 - 使用 `event.clientX/event.clientY` 属性来获取点击坐标。

From 7dbacf92c6f814de8fefc28ef95f508774129d4e Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Wed, 25 Mar 2020 16:28:58 +0800
Subject: [PATCH 14/20] Update solution.md

---
 .../04-move-ball-field/solution.md            | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md
index 9c152278c5..2b89abf9b6 100644
--- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md
+++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md
@@ -1,11 +1,11 @@
 
-首先我们需要选择一种定位球的方法。
+首先，我们需要选择一种定位球的方法。
 
-我们不能使用 `position:fixed`，因为滑动页面会让球在球场上移动。
+我们不能使用 `position:fixed`，因为滚动页面会造成球被移出球场。
 
-因此我们应该使用 `position:absolute`，并使定位稳定，让 `field` 自身定位。
+所以我们应该使用 `position:absolute`，并且要使定位真正可靠，应该使 `field` 自身具有 `position:absolute`。
 
-然后球会相对于球场定位：
+然后，球将相对于球场定位：
 
 ```css
 #field {
@@ -16,36 +16,36 @@
 
 #ball {
   position: absolute;
-  left: 0; /* 相对于最近位置的祖先（字段） */
+  left: 0; /* 相对于最接近的祖先（field） */
   top: 0;
-  transition: 1s all; /* 在左上方的 CSS 特效会让球飞起来 */
+  transition: 1s all; /* left/top 的 CSS 动画，使球飞起来 */
 }
 ```
 
-接下来我们需要指定正确的 `ball.style.position.left/top`。它们现在包含球场的相对坐标。
+接下来我们需要指定正确的 `ball.style.left/top`。它们现在包含相对于球场的坐标。
 
-这是图片：
+这是示意图：
 
 ![](move-ball-coords.svg)
 
-我们有 `event.clientX/clientY`—— 单击窗口时的相对坐标。
+我们有 `event.clientX/clientY` —— 单击位置的窗口相对坐标。
 
-要获取单击字段的相对 `left` 坐标，我们可以减去字段的左边缘和边框宽度：
+要获取单击位置的球场相对坐标 `left`，我们可以减去球场左边缘和边框的宽度：
 
 ```js
-let left = event.clientX - fieldInnerCoords.left - field.clientLeft;
+let left = event.clientX - fieldCoords.left - field.clientLeft;
 ```
 
-通常情况下，`ball.style.position.left` 是指“元素的左边缘”（球）。因此，如果我们指定 `left`，那么球的边缘就会在鼠标光标下面。
+通常情况下，`ball.style.left` 表示“元素的左边缘”（球）。因此，如果我们将其指定为 `left`，那么球的边缘就将位于鼠标光标下方，而非球的中心。
 
-我们需要将球向左移动宽度的一半，向上移动高度的一半，使其居中。
+我们需要将球向左移动球宽度的一半，向上移动球高度的一半，以使其居中。
 
-因此，最后 `left` 是：
+所以，最后的 `left` 将是：
 
 ```js
-let left = event.clientX - fieldInnerCoords.left - field.clientLeft - ball.offsetWidth/2;
+let left = event.clientX - fieldCoords.left - field.clientLeft - ball.offsetWidth/2;
 ```
 
-使用相同的逻辑计算垂直坐标。
+使用相同的逻辑来计算垂直坐标。
 
-请注意，球的宽度/高度必须在我们设置 `ball.offsetWidth` 时就已知。应该在 HTML 或 CSS 中指定。
+请注意，球的宽度/高度必须在我们访问 `ball.offsetWidth` 时就已知。应该在 HTML 或 CSS 中指定。

From 544194a1eb98db1f7147b100d4442186f738f314 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Wed, 25 Mar 2020 16:36:44 +0800
Subject: [PATCH 15/20] Update solution.md

---
 .../04-move-ball-field/solution.md                              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md
index 2b89abf9b6..1d68516ec8 100644
--- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md
+++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md
@@ -36,7 +36,7 @@
 let left = event.clientX - fieldCoords.left - field.clientLeft;
 ```
 
-通常情况下，`ball.style.left` 表示“元素的左边缘”（球）。因此，如果我们将其指定为 `left`，那么球的边缘就将位于鼠标光标下方，而非球的中心。
+通常情况下，`ball.style.left` 表示“元素的左边缘”（球）。因此，如果我们将其指定为 `left`，那么球的边缘而非球的中心将位于鼠标光标下方。
 
 我们需要将球向左移动球宽度的一半，向上移动球高度的一半，以使其居中。
 

From 4a453f2d5de5c11d27b04eff0176fc00cd14eb02 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Wed, 25 Mar 2020 18:57:36 +0800
Subject: [PATCH 16/20] Update solution.md

---
 .../05-sliding-menu/solution.md               | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md
index 8a7bc1ad57..ac939abee3 100644
--- a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md
+++ b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md
@@ -1,12 +1,13 @@
 
 # HTML/CSS
-首先，我们创建 HTML/CSS。
 
-菜单是页面上的一个独立的图形组件，所以最好把它放在一个 DOM 元素中。
+首先，让我们创建 HTML/CSS。
 
-菜单项列表可以分层为列表 `ul/li`。
+菜单是页面上的一个独立图形组件，所以最好把它放入一个单独的 DOM 元素中。
 
-下面是示例的结构：
+菜单项的列表可以被作为列表 `ul/li` 列出。
+
+下面是示例结构：
 
 ```html
 <div class="menu">
@@ -19,7 +20,7 @@
 </div>
 ```
 
-我们的标题使用 `<span>`，因为 `<div>` 有一个隐式的 `display:block`，它会 100% 的占据水平宽度。
+我们对标题使用 `<span>`，因为 `<div>` 有一个隐式的 `display:block`，它会占据 100% 的水平宽度。
 
 就像这样：
 
@@ -27,21 +28,21 @@
 <div style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</div>
 ```
 
-因此如果我们在它上面设置 `onclick`，就会在文本的右边捕获点击事件。
+因此，如果我们在它上面设置 `onclick`，那么它也会捕获文本右侧的点击。
 
-...但 `<span>` 有一个隐式 `display: inline`，因此它会占据足够的位置来适应所有的文本：
+……由于 `<span>` 有一个隐式的 `display: inline`，它恰好占据了足以容纳所有文本的位置：
 
 ```html autorun height=50
 <span style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</span>
 ```
 
- # 切换菜单
+# 切换菜单
 
 切换菜单应更改箭头并显示/隐藏菜单列表。
 
-所以这些更改都能被 CSS 完美处理。在 JavaScript 中，我们应该通过添加/移除 `.open` 类来标记菜单的当前状态。
+所有这些更改都可以通过 CSS 完美处理。在 JavaScript 中，我们应该通过添加/移除 `.open` 类来标记菜单的当前状态。
 
-没有它，菜单就会关闭：
+没有它，菜单就会被关闭：
 
 ```css
 .menu ul {
@@ -58,7 +59,7 @@
 }
 ```
 
-...使用 `.open` 后，箭头会改变，列表会出现：
+……有 `.open` 后，箭头会改变，列表会出现：
 
 ```css
 .menu.open .title::before {

From e630097f0fe912b8889466b31b8278343d0a4f55 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Wed, 25 Mar 2020 19:17:41 +0800
Subject: [PATCH 17/20] Update task.md

---
 .../01-introduction-browser-events/06-hide-message/task.md    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md b/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md
index f06d1629cd..176b5d47c6 100644
--- a/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md
+++ b/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md
@@ -4,9 +4,9 @@ importance: 5
 
 # 添加关闭按钮
 
-有一张消息列表。
+有一个消息列表。
 
-使用 JavaScript 在每条消息的右上角都添加一个按钮。
+使用 JavaScript 在每条消息的右上角添加一个关闭按钮。
 
 结果应该如下所示：
 

From e6bc6d99e2b0570af73faf777b87c198ccad376f Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Wed, 25 Mar 2020 19:23:16 +0800
Subject: [PATCH 18/20] Update solution.md

---
 .../06-hide-message/solution.md                             | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md b/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md
index a4709c4cab..cb30b86e06 100644
--- a/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md
+++ b/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md
@@ -1,12 +1,12 @@
 
-我们可以使用 `position:absolute`（使 pane `position:relative`）或者 `float:right` 来添加按钮。`float:right` 的好处是按钮永远都不会重叠文本，但是 `position:absolute` 有更多的灵活性，选择权在你手上。
+我们可以使用 `position:absolute`（并使窗格 `position:relative`）或者 `float:right` 来添加按钮。`float:right` 的好处是按钮永远都不会与文本重叠，但是 `position:absolute` 则提供了更大的自由度。选择权在你自己手上。
 
-然后对于每个 pane 来说，代码都是如此：
+然后，对于每个窗格（pane），代码可以像这样：
 ```js
 pane.insertAdjacentHTML("afterbegin", '<button class="remove-button">[x]</button>');
 ```
 
-然后 `<button>` 变成了 `pane.firstChild`，因此我们可以像这样为它添加处理器：
+然后 `<button>` 变成了 `pane.firstChild`，因此我们可以像这样为它添加处理程序：
 
 ```js
 pane.firstChild.onclick = () => pane.remove();

From fc04323c23ce4a4da8e7c5d722dad98dbebb9e62 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Wed, 25 Mar 2020 19:27:15 +0800
Subject: [PATCH 19/20] Update task.md

---
 .../01-introduction-browser-events/07-carousel/task.md    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md b/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md
index 9675eb1047..a1372cb1a3 100644
--- a/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md
+++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md
@@ -2,12 +2,12 @@ importance: 4
 
 ---
 
-# Carousel
+# 轮播图
 
-创建一个 "carousel" —— 一条可以通过点击箭头滚动的图像带。
+创建一个“轮播图（carousel）” —— 一条可以通过点击箭头来滚动图像的图像带。
 
 [iframe height=200 src="solution"]
 
-以后，我们可以添加更多的功能：无限滚动，动态加载等。
+之后，我们可以为其添加更多功能：无限滚动，动态加载等。
 
-P.S. 对这个任务来说，HTML/CSS 占解决方案的 90%。
+P.S. 对于这个任务，HTML/CSS 结构实际上占解决方案的 90%。

From 42b7850400d35f859638807928bf906e99299a42 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Wed, 25 Mar 2020 19:37:34 +0800
Subject: [PATCH 20/20] Update solution.md

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

diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md
index 8072f1d529..0731ce3064 100644
--- a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md
+++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md
@@ -1,17 +1,17 @@
-图像带可以表示为 `ul/li` 图像列表 `<img>`。
+图像带可以表示为图像 `<img>` 的 `ul/li` 列表。
 
-通常情况下，这样的带是很宽的，但我们还是在其周围设置了一个固定大小的 `<div>` 来“剪切”它，因此只会有一部分带是可见的：
+通常，这样的图像带是很宽的，但我们在其周围放置了一个固定大小的 `<div>` 来“剪切”它，因此，只有图像带的一部分是可见的：
 
 ![](carousel1.svg)
 
-为了使列表水平显示，我们需要为 `<li>` 应用正确的 CSS 属性，比如 `display: inline-block`。
+为了使列表水平显示，我们需要为 `<li>` 应用正确的 CSS 属性，例如 `display: inline-block`。
 
-对于 `<img>` 来说，我们应该调整 `display`，因为默认情况下它是 `inline`。由于在 `inline` 元素下方具有 "letter tails" 而存在额外空间，所以我们可以使用 `display:block` 来移除多余的空间。
+对于 `<img>` 来说，我们应该调整 `display`，因为默认情况下它是 `inline`。在 `inline` 元素下方为 "letter tails" 保留了额外的空间，因此，我们可以使用 `display:block` 来将其删除。
 
-我们可以移动 `<ul>` 来进行滚动。有很多方法都可以实现这一点，比如通过修改 `margin-left` 或者（性能更好）使用 `transform: translateX()`：
+我们可以移动 `<ul>` 来进行滚动。有很多方法可以实现这一点，例如，通过修改 `margin-left` 或者使用 `transform: translateX()`（性能更好）：
 
 ![](carousel2.svg)
 
-外部 `<div>` 具有固定的宽度，因此，"extra" 图像可以被剪切。
+外部的 `<div>` 具有固定的宽度，因此，会裁剪掉“多余”的图像。
 
-整个 carousel 是页面是一个自包含的 "graphical component"，因为我们最好将其封装成一个单独的 `<div class="carousel">`，并对其设置样式。
+整个轮播图是页面上的一个独立的“图形组件”，因此我们最好将其包装到一个单独的 `<div class="carousel">` 中，并在其中对其进行样式设置。