From 0b75fdb12dfb62cc987b9c316595e6a09d8eef58 Mon Sep 17 00:00:00 2001
From: Starrier <1342878298@qq.com>
Date: Wed, 18 Jul 2018 18:33:05 +0800
Subject: [PATCH 01/14] =?UTF-8?q?=E7=BF=BB=E8=AF=91=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../03-event-delegation/1-hide-message-delegate/task.md | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
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 62c0a8ab00..a6b06614f8 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
@@ -2,12 +2,12 @@ importance: 5
---
-# Hide messages with delegation
+# 使用委托隐藏消息
-There's a list of messages with removal buttons `[x]`. Make the buttons work.
+有一张带有移除按钮 `[x]` 的消息列表。让按钮可以工作。
-Like this:
+就像这样：
[iframe src="solution" height=420]
-P.S. Should be only one event listener on the container, use event delegation.
+P.S. 应该只是容器上的一个事件侦听者，使用事件委托。
From 055fbab284e906321a5039bbed77189dba808d74 Mon Sep 17 00:00:00 2001
From: Starrier <1342878298@qq.com>
Date: Wed, 18 Jul 2018 23:05:52 +0800
Subject: [PATCH 02/14] =?UTF-8?q?=E7=BF=BB=E8=AF=91=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../2-events/03-event-delegation/2-sliding-tree/solution.md | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
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 09c14a08c1..d533eaed15 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 @@
-The solution has two parts.
+解决方案有两部分。
-1. Wrap every tree node title into ``. Then we can CSS-style them on `:hover` and handle clicks exactly on text, because `` width is exactly the text width (unlike without it).
-2. Set a handler to the `tree` root node and handle clicks on that `` titles.
+1. 将每个树节点标题包装为 ``。然后我们可以在 `:hover` 上使用 CSS 样式，并准确地处理文本上的单击，因为 `` 宽度正好是文本宽度（与没有它不同）。
+2. 将处理器设置为 `tree` 根节点，并处理对该 `` 标题的单击。
From 80ce820b791ff151c2dfd6bf7c3bbf71e56e528e Mon Sep 17 00:00:00 2001
From: Starrier <1342878298@qq.com>
Date: Wed, 18 Jul 2018 23:07:18 +0800
Subject: [PATCH 03/14] =?UTF-8?q?=E7=BF=BB=E8=AF=91=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
2-ui/2-events/03-event-delegation/article.md | 130 +++++++++----------
1 file changed, 65 insertions(+), 65 deletions(-)
diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md
index 16d9dc71a0..c2e2d664b9 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 delegation
+# 事件委托
-Capturing and bubbling allow to implement one of most powerful event handling patterns called *event delegation*.
+捕获和冒泡允许实现一种称为**事件委托**的强大处理模式。
-The idea is that if we have a lot of elements handled in a similar way, then instead of assigning a handler to each of them -- we put a single handler on their common ancestor.
+我们的想法是，如果我们有许多元素是以类似的方式处理的，那么我们就不需要给每个元素分配一个处理程序 —— 而是在它们共同的祖先上面添加一个处理器。
-In the handler we get `event.target`, see where the event actually happened and handle it.
+在处理器中，我们得到了 `event.target`，查看事件实际发生的位置并处理它。
-Let's see an example -- the [Ba-Gua diagram](http://en.wikipedia.org/wiki/Ba_gua) reflecting the ancient Chinese philosophy.
+我们看一个示例 —— 反映中国古代哲学的[八卦图](http://en.wikipedia.org/wiki/Ba_gua)。
-Here it is:
+就是这个：
[iframe height=350 src="bagua" edit link]
-The HTML is like this:
+HTML 如下所示：
```html
@@ -30,22 +30,22 @@ The HTML is like this:
```
-The table has 9 cells, but there could be 99 or 9999, doesn't matter.
+该表有 9 个单元，但可能有 99 个或者 9999 个单元，这些都不重要。
-**Our task is to highlight a cell `
` on click.**
+**我们的任务是在单击时高亮显示一个 `
` 单元格。**
Instead of assign an `onclick` handler to each `
` (can be many) -- we'll setup the "catch-all" handler on `
` element.
-It will use `event.target` to get the clicked element and highlight it.
+它使用 `event.target` 来获取单击的元素并高亮显示它。
-The code:
+代码：
```js
let selectedTd;
*!*
table.onclick = function(event) {
- let target = event.target; // where was the click?
+ let target = event.target; // 在哪里单击的？
if (target.tagName != 'TD') return; // not on TD? Then we're not interested
@@ -62,13 +62,13 @@ function highlight(td) {
}
```
-Such a code doesn't care how many cells there are in the table. We can add/remove `
` dynamically at any time and the highlighting will still work.
+这样的代码不会关心在表中有多少单元格。随时可以动态添加/移除 `
`，高亮显示仍然有效。
-Still, there's a drawback.
+尽管如此，还是存在缺点。
-The click may occur not on the `
`, but inside it.
+单击可能不是发生在 `
` 上，而是发生在其内部。
-In our case if we take a look inside the HTML, we can see nested tags inside `
`, like ``:
+在我们的例子中，如果我们查看 HTML 内部，我们可以看到 `
` 内的嵌套标记，比如 ``：
```html
@@ -79,13 +79,13 @@ In our case if we take a look inside the HTML, we can see nested tags inside `
```
-Naturally, if a click happens on that `` then it becomes the value of `event.target`.
+当然，如果单击该 ``，那么它将成为 `event.target` 的值。
-In the handler `table.onclick` we should take such `event.target` and find out whether the click was inside `
` or not.
+在处理器 `table.onclick` 中，我们应该接受这样的 `event.target`，并确定单击是否在 `
` 内。
-Here's the improved code:
+以下是改善的代码：
```js
table.onclick = function(event) {
@@ -99,27 +99,27 @@ table.onclick = function(event) {
};
```
-Explanations:
-1. The method `elem.closest(selector)` returns the nearest ancestor that matches the selector. In our case we look for `
` on the way up from the source element.
-2. If `event.target` is not inside any `
`, then the call returns `null`, and we don't have to do anything.
-3. In case of nested tables, `event.target` may be a `
` lying outside of the current table. So we check if that's actually *our table's* `
`.
-4. And, if it's so, then highlight it.
+解释：
+1. `elem.closest(selector)` 方法返回与选择器匹配的最近的祖先。在我们的例子中，我们从源元素上升的路上查找 `
`。
+4. 如果是的话，就高亮显示它。
-## Delegation example: actions in markup
+## 委托示例：标记中的操作
-The event delegation may be used to optimize event handling. We use a single handler for similar actions on many elements. Like we did it for highlighting `
` 一样。
-But we can also use a single handler as an entry point for many different things.
+但我们仍然可以使用单个处理器作为许多不同事情的入口点。
-For instance, we want to make a menu with buttons "Save", "Load", "Search" and so on. And there's an object with methods `save`, `load`, `search`....
+例如，我们想要制作一个有“保存”、“加载”、“搜索”等功能的菜单。有一个拥有 `save`、`load`、`search` 等方法的对象。
-The first idea may be to assign a separate handler to each button. But there's a more elegant solution. We can add a handler for the whole menu and `data-action` attributes for buttons that has the method to call:
+第一个想法可能是为每个按钮分配一个单独的处理器。但有一个更优雅的解决方案。我们可以为整个菜单添加一个处理器，并为有方法调用的按钮添加 `data-action`属性：
```html
```
-The handler reads the attribute and executes the method. Take a look at the working example:
+处理器读取属性并执行方法。查看下述运行示例：
```html autorun height=60 run
@@ -161,28 +161,28 @@ The handler reads the attribute and executes the method. Take a look at the work
```
-Please note that `this.onClick` is bound to `this` in `(*)`. That's important, because otherwise `this` inside it would reference the DOM element (`elem`), not the menu object, and `this[action]` would not be what we need.
+请注意，`this.onClick` 在 `(*)` 中绑定到 `this`。这很重要，否则内部 `this` 将引用 DOM 元素（`elem`），而不是菜单对象，`this[action]` 不是我们所需要的。
-So, what the delegation gives us here?
+那么，这里的委托给我们带来了什么？
```compare
-+ We don't need to write the code to assign a handler to each button. Just make a method and put it in the markup.
-+ The HTML structure is flexible, we can add/remove buttons at any time.
++ 我们不需要编写代码来为每个按钮分配一个处理器。只需要创建一个方法并将其放入标记中即可。
++ HTML 结构灵活，可以随时添加/移除按钮。
```
-We could also use classes `.action-save`, `.action-load`, but an attribute `data-action` is better semantically. And we can use it in CSS rules too.
+我们也可以使用 `.action-save`、`.action-load`，但 `data-action` 属性在语义上更好。我们也可以在 CSS 规则中使用它。
-## The "behavior" pattern
+## "behavior" 模式
-We can also use event delegation to add "behaviors" to elements *declaratively*, with special attributes and classes.
+我们还可以使用事件委托将元素 **declaratively** 添加到具有特定属性和类的元素 "behaviors" 中。
-The pattern has two parts:
-1. We add a special attribute to an element.
-2. A document-wide handler tracks events, and if an event happens on an attributed element -- performs the action.
+模式有两部分：
+1. 我们向元素添加一个特殊属性。
+2. 文档范围内的处理器跟踪事件，如果事件发生在元素属性上，则执行该操作。
-### Counter
+### 计数
-For instance, here the attribute `data-counter` adds a behavior: "increase on click" to buttons:
+例如，这里的 `data-counter` 属性添加了一个行为：给按钮添加了 “点击就会增加”" 的行为。
```html run autorun height=60
Counter:
@@ -199,19 +199,19 @@ One more counter:
```
-If we click a button -- its value is increased. Not buttons, but the general approach is important here.
+如果我们点击按钮 —— 它的值就会增加。不仅仅是按钮，但一般的方法在这里却很重要。
-There can be as many attributes with `data-counter` as we want. We can add new ones to HTML at any moment. Using the event delegation we "extended" HTML, added an attribute that describes a new behavior.
+我们想要的 `data-counter` 属性可以有很多。我们可以在任何时候向 HTML 添加新的。使用时间委托，我们可以 "extended" HTML，添加一个描述新行为的属性。
```warn header="For document-level handlers -- always `addEventListener`"
-When we assign an event handler to the `document` object, we should always use `addEventListener`, not `document.onclick`, because the latter will cause conflicts: new handlers overwrite old ones.
+当我们将事件处理器分配给 `document` 对象，我们应该始终使用 `addEventListener`，而不是 `document.onclick`，因为后者会导致冲突：新的处理器会重写旧的。
-For real projects it's normal that there are many handlers on `document` set by different parts of the code.
+对于实际项目来说。代码的不同部分设置的 `document` 上有许多处理器是正常的。
```
### Toggler
-One more example. A click on an element with the attribute `data-toggle-id` will show/hide the element with the given `id`:
+再举一个例子，单击一个具有 `data-toggle-id` 属性的元素将显示/隐藏具有给定 `id` 的元素：
```html autorun run height=60