diff --git a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md
index f284b3ff40..4f97f1504d 100644
--- a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md
+++ b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md
@@ -4,10 +4,10 @@ importance: 5
 
 # 使用委托隐藏消息
 
-有一张带有移除按钮 `[x]` 的消息列表。让按钮可以工作。
+有一个带有移除按钮 `[x]` 的消息列表。让按钮可以工作。
 
 就像这样：
 
 [iframe src="solution" height=420]
 
-P.S. 在容器上应该只有一个监听器，即使用事件委托。
+P.S. 在容器上应该只有一个事件监听器，请使用事件委托。
diff --git a/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md b/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md
index d3424fd77f..4d0ff14be3 100644
--- a/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md
+++ b/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md
@@ -1,4 +1,4 @@
-解决方案分为两步。
+解决方案分为两个部分。
 
-1. 将每个树节点的标题用 `<span>` 包裹起来。然后我们可以在 `:hover` 上使用 CSS 样式，并准确地处理文本上的单击事件，因为 `<span>` 宽度正好是文本宽度（与没有它不同）。
-2. 为 `tree` 的根节点设置处理器来处理 `<span>` 中标题的单击事件。
+1. 将每个树节点的标题都包装到 `<span>` 中。然后我们可以在 `:hover` 上使用 CSS 样式，并精确地处理文本上的点击事件，因为 `<span>` 的宽度恰好是文本的宽度（与没有宽度不同）。
+2. 为 `tree` 的根节点设置一个处理程序，来处理 `<span>` 标题上的点击事件。
diff --git a/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md b/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md
index 3173e7417e..5cffaff91e 100644
--- a/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md
+++ b/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md
@@ -4,11 +4,11 @@ importance: 5
 
 # 树形菜单
 
-创建一个单击可以显示/隐藏子节点的树形菜单：
+创建一个点击可以显示/隐藏子节点的树形菜单：
 
 [iframe border=1 src="solution"]
 
 要求：
 
-- 只有一个事件处理器（使用委托）
-- 单击节点标题以外的地方（空白区域）不做任何处理。
+- 只能有一个事件处理程序（使用委托）。
+- 对节点标题以外（在空白处）的点击不会做任何处理。
diff --git a/2-ui/2-events/03-event-delegation/3-sortable-table/task.md b/2-ui/2-events/03-event-delegation/3-sortable-table/task.md
index 92b25e9cfb..20a6aba13b 100644
--- a/2-ui/2-events/03-event-delegation/3-sortable-table/task.md
+++ b/2-ui/2-events/03-event-delegation/3-sortable-table/task.md
@@ -2,11 +2,11 @@ importance: 4
 
 ---
 
-# 可排序表格
+# 可排序的表格
 
-让表格可以排序：单击 `<th>` 元素让对应的列自动排序。
+使表格可排序：点击 `<th>` 元素，应按对应的列对表格进行排序。
 
-每个 `<th>` 都有类型属性，如下所示：
+每个 `<th>` 的特性（attribute）中都有类型，如下所示：
 
 ```html
 <table id="grid">
@@ -32,7 +32,7 @@ importance: 4
 </table>
 ```
 
-在上面的例子中，第一列为数字，第二列为 —— 字符串。排序函数应根据类型进行排序。
+在上面的示例中，第一列为数字，第二列为字符串。排序函数应根据类型进行排序。
 
 应该只支持 `"string"` 和 `"number"` 类型。
 
@@ -40,4 +40,4 @@ importance: 4
 
 [iframe border=1 src="solution" height=190]
 
-P.S. 表可以很大，有任意数量的行和列。
+P.S. 表格可以更大，有任意数量的行和列。
diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md
index 6f72f372f5..ff8518b58a 100644
--- a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md
+++ b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md
@@ -2,11 +2,11 @@ importance: 5
 
 ---
 
-# 提示工具行为
+# 工具提示行为
 
-为提示工具行为编写 JavaScript 代码。
+编写工具提示（tooltip）行为的 JavaScript 代码。
 
-当鼠标移入带有 `data-tooltip` 的元素时,提示工具应该出现在它上面，移出时则隐藏起来
+当鼠标在带有 `data-tooltip` 的元素的上方时，工具提示应显示在其上方，当鼠标移开时，工具提示将隐藏起来。
 
 带有注释的 HTML 示例：
 ```html
@@ -14,23 +14,25 @@ importance: 5
 <button data-tooltip="HTML<br>tooltip">One more button</button>
 ```
 
-运行结果如下：
+运行效果如下：
 
 [iframe src="solution" height=200 border=1]
 
-在这个任务中，我们假设所有具有 `data-tooltip` 的元素中只有文本。没有嵌套标签。
+在此任务中，我们假设所有具有 `data-tooltip` 的元素中都只有文本。尚无嵌套标签。
 
-详细资料：
+详情：
 
-- 提示工具不应超出窗口边缘。通常，它应该在元素的上方，但是如果元素位于页面顶部，并且没有提示工具的空间，则在其下面。
-- 提示工具由 `data-tooltip` 属性中指定。它可以是任意 HTML。
+- 元素和工具提示之间的距离应为 `5px`。
+- 如果可能，工具提示应相对于元素居中。
+- 工具提示不应与窗口边缘交叉。通常，它应该在元素的上方，但是如果元素位于页面顶部，并且没有工具提示的空间，则应该在元素的下方。
+- 工具提示的内容在 `data-tooltip` 属性中给定。它可以是任意 HTML。
 
-你需要两个事件：
-- `mouseover` 当指针出现在元素上时触发。
-- `mouseout` 当指针移出元素时触发。
+在这里你将需要两个事件：
+- `mouseover` 当鼠标指针出现在元素上方时触发。
+- `mouseout` 当指针离开元素时触发。
 
-请使用事件委托：在 `document` 上设置两个处理器，以跟踪带有 `data-tooltip` 的元素中所有的 "over" 和 "out"，并从那里管理提示工具。
+请使用事件委托：在 `document` 上设置两个处理程序，以跟踪带有 `data-tooltip` 的元素中的所有 "over" 和 "out"，并从那里管理工具提示。
 
-在实现了该行为后，即使是不熟悉 JavaScript 的人也可以添加带注释的元素。
+在实现了该行为后，即使不熟悉 JavaScript 的人也可以添加带注释的元素。
 
-P.S. 为了保持自然和简单：一次只能出现一个提示工具。
+P.S. 一次只能显示一个工具提示。
diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md
index e838685405..372d34c92c 100644
--- a/2-ui/2-events/03-event-delegation/article.md
+++ b/2-ui/2-events/03-event-delegation/article.md
@@ -1,19 +1,19 @@
 
 # 事件委托
 
-捕获和冒泡允许实现一种称为**事件委托**的强大的事件处理模式。
+捕获和冒泡允许我们实现一种被称为 **事件委托** 的强大的事件处理模式。
 
-我们的想法是，如果我们有许多元素是以类似的方式处理的，那么我们就不需要给每个元素分配一个处理器 —— 而是在它们共同的祖先上面添加一个处理器。
+这个想法是，如果我们有许多以类似方式处理的元素，那么就不必为每个元素分配一个处理程序 —— 而是将单个处理程序放在它们的共同祖先上。
 
-在处理器中，我们可以得到 `event.target`，查看事件实际发生的位置并处理它。
+在处理程序中，我们获得 `event.target`，查看事件实际发生的位置并进行处理。
 
-我们看一个示例 —— 反映中国古代哲学的[八卦图](http://en.wikipedia.org/wiki/Ba_gua)。
+让我们看一个示例 —— 反映中国古代哲学的 [八卦图](http://en.wikipedia.org/wiki/Ba_gua)。
 
-就是这个：
+如下所示：
 
 [iframe height=350 src="bagua" edit link]
 
-HTML 如下所示：
+其 HTML 如下所示：
 
 ```html
 <table>
@@ -21,54 +21,54 @@ HTML 如下所示：
     <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
   </tr>
   <tr>
-    <td>...<strong>Northwest</strong>...</td>
-    <td>...</td>
-    <td>...</td>
+    <td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders</td>
+    <td class="n">...</td>
+    <td class="ne">...</td>
   </tr>
   <tr>...2 more lines of this kind...</tr>
   <tr>...2 more lines of this kind...</tr>
 </table>
 ```
 
-该表有 9 个单元格，但可能有 99 个或者 9999 个单元，这些都不重要。
+该表格有 9 个单元格（cell），但可以有 99 个或 9999 个单元格，这都不重要。
 
-**我们的任务是在单击时高亮显示一个 `<td>` 单元格。**
+**我们的任务是在点击时高亮显示被点击的单元格 `<td>`。**
 
-相比为每个 `<td>`（可能有很多）分配一个 `onclick` 处理器 —— 我们可以为 `<table>` 元素设置一个 "catch-all" 处理器。
+与其为每个 `<td>`（可能有很多）分配一个 `onclick` 处理程序 —— 我们可以在 `<table>` 元素上设置一个“捕获所有”的处理程序。
 
-它会使用 `event.target` 来获取单击的元素并高亮显示它。
+它将使用 `event.target` 来获取点击的元素并高亮显示它。
 
-代码：
+代码如下：
 
 ```js
 let selectedTd;
 
 *!*
 table.onclick = function(event) {
-  let target = event.target; // 在哪里单击的？
+  let target = event.target; // 在哪里点击的？
 
   if (target.tagName != 'TD') return; // 不在 TD 上？那么我们就不会在意
 
-  highlight(target); // 高亮显示
+  highlight(target); // 高亮显示它
 };
 */!*
 
 function highlight(td) {
-  if (selectedTd) { // 移除任何已存在的高亮显示内容
+  if (selectedTd) { // 移除现有的高亮显示，如果有的话
     selectedTd.classList.remove('highlight');
   }
   selectedTd = td;
-  selectedTd.classList.add('highlight'); // 高亮新的 td
+  selectedTd.classList.add('highlight'); // 高亮显示新的 td
 }
 ```
 
-代码不会关心在表中有多少单元格。随时可以动态添加/移除 `<td>`，高亮显示仍然有效。
+此代码不会关心在表格中有多少个单元格。我们可以随时动态添加/移除 `<td>`，高亮显示仍然有效。
 
-尽管如此，还是存在缺点。
+尽管如此，但还是存在缺陷。
 
-单击可能不是发生在 `<td>` 上，而是发生在其内部。
+点击可能不是发生在 `<td>` 上，而是发生在其内部。
 
-在我们的例子中，如果我们查看 HTML 内部，我们可以看到 `<td>` 内的嵌套标签，比如 `<strong>`：
+在我们的例子中，如果我们看一下 HTML 内部，我们可以看到 `<td>` 内还有嵌套的标签，例如 `<strong>`：
 
 ```html
 <td>
@@ -79,13 +79,13 @@ function highlight(td) {
 </td>
 ```
 
-当然，如果单击该 `<strong>`，那么它将成为 `event.target` 的值。
+自然地，如果在该 `<strong>` 上点击，那么它将成为 `event.target` 的值。
 
 ![](bagua-bubble.svg)
 
-在处理器 `table.onclick` 中，我们应该接受这样的 `event.target`，并确定单击是否在 `<td>` 内。
+在处理程序 `table.onclick` 中，我们应该接受这样的 `event.target`，并确定该点击是否在 `<td>` 内。
 
-以下是改进后的代码：
+下面是改进后的代码：
 
 ```js
 table.onclick = function(event) {
@@ -100,28 +100,28 @@ table.onclick = function(event) {
 ```
 
 解释：
-1. `elem.closest(selector)` 方法返回与选择器匹配的最近的祖先。在我们的例子中，我们从源元素向上查找 `<td>`。
+1. `elem.closest(selector)` 方法返回与 `selector` 匹配的最近的祖先。在我们的例子中，我们从源元素开始向上寻找 `<td>`。
 2. 如果 `event.target` 不在任何 `<td>` 中，那么调用将返回 `null`，我们不需要做任何事情。
-3. 在嵌套表的情况下，`event.target` 可能是位于当前表格之外的 `<td>`。因此我们需要检查这是否是**我们的表格**的 `<td>`。
+3. 在嵌套的表格的情况下，`event.target` 可能是位于当前表格之外的 `<td>`。因此我们需要检查这是否是 **我们的表格中的** `<td>`。
 4. 如果是的话，就高亮显示它。
 
-## 委托示例：标记中的操作
+最终，我们得到了一个快速、高效的用于高亮显示的代码，该代码与表格中的 `<td>` 的数量无关。
 
-事件委托可优化事件处理。我们使用单个处理器来对许多元素进行相似的操作。就像我们用于高亮显示 `<td>` 一样。
+## 委托示例：标记（markup）中的操作
 
-但我们仍然可以使用单个处理器作为许多不同事件的入口点。
+事件委托还有其他用途。
 
-例如，我们想要制作一个有“保存”、“加载”和“搜索”等功能的菜单。有一个拥有 `save`、`load` 和 `search` 等方法的对象。
+例如，我们想要编写一个有“保存”、“加载”和“搜索”等按钮的菜单。并且，这里有一个具有 `save`、`load` 和 `search` 等方法的对象。如何匹配它们？
 
-第一个想法可能是为每个按钮分配一个单独的处理器。但有一个更优雅的解决方案。我们可以为整个菜单添加一个处理器，并为有方法调用的按钮添加 `data-action` 属性：
+第一个想法可能是为每个按钮分配一个单独的处理程序。但是有一个更优雅的解决方案。我们可以为整个菜单添加一个处理程序，并为具有方法调用的按钮添加 `data-action` 特性（attribute）：
 
 ```html
 <button *!*data-action="save"*/!*>Click to Save</button>
 ```
 
-处理器读取属性并执行方法。查看下述运行示例：
+处理程序读取特性（attribute）并执行该方法。工作示例如下：
 
-```html autorun height=60 run
+```html autorun height=60 run untrusted
 <div id="menu">
   <button data-action="save">Save</button>
   <button data-action="load">Load</button>
@@ -161,28 +161,28 @@ table.onclick = function(event) {
 </script>
 ```
 
-请注意，`this.onClick` 在 `(*)` 中绑定到了 `this`。这很重要，否则内部 `this` 将引用 DOM 元素（`elem`），而不是菜单对象，`this[action]` 不是我们所需要的。
+请注意，`this.onClick` 在 `(*)` 行中被绑定到了 `this`。这很重要，因为否则内部的 `this` 将引用 DOM 元素（`elem`），而不是 `Menu` 对象，那样的话，`this[action]` 将不是我们所需要的。
 
-那么，这里的委托给我们带来了什么？
+那么，这里的委托给我们带来了什么好处？
 
 ```compare
-+ 我们不需要编写代码来为每个按钮分配一个处理器。只需要创建一个方法并将其放入标记中即可。
-+ HTML 结构灵活，可以随时添加/移除按钮。
++ 我们不需要编写代码来为每个按钮分配一个处理程序。只需要创建一个方法并将其放入标记（markup）中即可。
++ HTML 结构非常灵活，我们可以随时添加/移除按钮。
 ```
 
-我们也可以使用 `.action-save`、`.action-load`，但 `data-action` 属性在语义上更好。我们也可以在 CSS 规则中使用它。
+我们也可以使用 `.action-save`，`.action-load` 类，但 `data-action` 特性（attribute）在语义上更好。我们也可以在 CSS 规则中使用它。
 
-## “行为型”模式
+## “行为”模式
 
-我们还可以使用事件委托**声明式**地通过特定属性和类为元素添加“行为”。
+我们还可以使用事件委托将“行为”以 **声明方式** 添加到具有特殊特性（attribute）和类的元素中。
 
-模式分为两步：
-1. 我们向元素添加一个特殊属性。
-2. 用文档范围级的处理器追踪事件，如果事件发生在具有特定属性的元素上 —— 则执行该操作。
+行为模式分为两个部分：
+1. 我们将自定义特性添加到描述其行为的元素。
+2. 用文档范围级的处理程序追踪事件，如果事件发生在具有特定特性的元素上 —— 则执行操作。
 
-### 计数
+### 行为：计数器
 
-例如，这里的 `data-counter` 属性给按钮添加了一个“点击增加”的行为。
+例如，这里的特性 `data-counter` 给按钮添加了一个“点击增加”的行为。
 
 ```html run autorun height=60
 Counter: <input type="button" value="1" data-counter>
@@ -191,7 +191,7 @@ One more counter: <input type="button" value="2" data-counter>
 <script>
   document.addEventListener('click', function(event) {
 
-    if (event.target.dataset.counter != undefined) { // if the attribute exists...
+    if (event.target.dataset.counter != undefined) { // 如果这个特性存在...
       event.target.value++;
     }
 
@@ -201,17 +201,17 @@ One more counter: <input type="button" value="2" data-counter>
 
 如果我们点击按钮 —— 它的值就会增加。但不仅仅是按钮，一般的方法在这里也很重要。
 
-我们可以有很多像 `data-counter` 一样的属性。我们可以在任何时候向 HTML 添加新的属性。使用事件委托，我们可以“扩展” HTML，添加一个描述新行为的属性。
+我们可以根据需要使用 `data-counter` 特性，多少都可以。我们可以随时向 HTML 添加新的特性。使用事件委托，我们属于对 HTML 进行了“扩展”，添加了描述新行为的特性。
 
-```warn header="对于文档级的处理器 —— 始终是 `addEventListener`"
-当我们将事件处理器分配给 `document` 对象，我们应该始终使用 `addEventListener`，而不是 `document.onclick`，因为后者会导致冲突：新的处理器会重写旧的。
+```warn header="对于文档级的处理程序 —— 始终使用的是 `addEventListener`"
+当我们将事件处理程序分配给 `document` 对象时，我们应该始终使用 `addEventListener`，而不是 `document.on<event>`，因为后者会引起冲突：新的处理程序会覆盖旧的处理程序。
 
-对于实际项目来说。代码的不同部分设置的 `document` 上有许多处理器是正常的。
+对于实际项目来说。在 `document` 上有许多由代码的不同部分设置的处理程序，这是很正常的。
 ```
 
-### 切换器
+### 行为：切换器
 
-再举一个例子，单击一个具有 `data-toggle-id` 属性的元素将显示/隐藏具有给定 `id` 的元素：
+再举一个例子。点击一个具有 `data-toggle-id` 特性的元素将显示/隐藏具有给定 `id` 的元素：
 
 ```html autorun run height=60
 <button *!*data-toggle-id="subscribe-mail"*/!*>
@@ -236,37 +236,37 @@ One more counter: <input type="button" value="2" data-counter>
 </script>
 ```
 
-让我们再一次指出我们做了什么。现在，要将切换功能添加到元素中 —— 不需要了解 JavaScript，只需要使用 `data-toggle-id` 属性。
+让我们再次注意我们做了什么。现在，要向元素添加切换功能 —— 无需了解 JavaScript，只需要使用特性 `data-toggle-id` 即可。
 
-这可能变得非常方便 —— 不需要为每个这样的元素编写 JavaScript。只需要使用行为。文档级处理器使其可以用于页面的任何元素。
+这可能变得非常方便 —— 无需为每个这样的元素编写 JavaScript。只需要使用行为。文档级处理程序使其适用于页面的任意元素。
 
-我们也可以结合单个元素上的多个行为。
+我们也可以组合单个元素上的多个行为。
 
-“行为型”模式可以替代 JavaScript 的小片段。
+“行为”模式可以替代 JavaScript 的小片段。
 
 ## 总结
 
 事件委托真的很酷！这是 DOM 事件最有用的模式之一。
 
-它通常用于为许多相似的元素添加相同的处理，但不仅仅只是这样。
+它通常用于为许多相似的元素添加相同的处理，但不仅限于此。
 
 算法：
 
-1. 在容器上设置一个处理器。
-2. 在处理器中 —— 检查源元素的 `event.target`。
-3. 如果事件发生在我们感兴趣的元素中，那么处理该事件。
+1. 在容器（container）上放一个处理程序。
+2. 在处理程序中 —— 检查源元素 `event.target`。
+3. 如果事件发生在我们感兴趣的元素内，那么处理该事件。
 
 好处：
 
 ```compare
-+ 简化初始化并节省内存：不需要添加许多处理器。
-+ 更少的代码：添加或移除元素时，不需要添加/移除处理器。
-+ DOM 修改 ：我们可以使用 `innerHTML` 等来大量添加/移除元素。
++ 简化初始化并节省内存：无需添加许多处理程序。
++ 更少的代码：添加或移除元素时，无需添加/移除处理程序。
++ DOM 修改 ：我们可以使用 `innerHTML` 等，来批量添加/移除元素。
 ```
 
-委托处理方式也有局限性：
+事件委托也有其局限性：
 
 ```compare
-- 首先，事件必须冒泡。而有些事件不会冒泡。此外，低级别的处理器不应该使用 `event.stopPropagation()`。
-- 其次，委托会增加 CPU 负载，因为容器等级的处理器对容器中任何位置的事件做出反应，不管它们是否会引起我们的兴趣。但是通常负载是可以忽略不计的，所以我们不考虑它。
+- 首先，事件必须冒泡。而有些事件不会冒泡。此外，低级别的处理程序不应该使用 `event.stopPropagation()`。
+- 其次，委托可能会增加 CPU 负载，因为容器级别的处理程序会对容器中任意位置的事件做出反应，而不管我们是否对该事件感兴趣。但是，通常负载可以忽略不计，所以我们不考虑它。
 ```
diff --git a/images.yml b/images.yml
deleted file mode 100644
index 5a416a12f0..0000000000
--- a/images.yml
+++ /dev/null
@@ -1,2 +0,0 @@
-event-order-bubbling.svg:
-  Most deeply nested element: '嵌套层级最深的元素'