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..f284b3ff40 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. 在容器上应该只有一个监听器，即使用事件委托。 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..d3424fd77f 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` 的根节点设置处理器来处理 `` 中标题的单击事件。 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 bdcf2a510b..3173e7417e 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 @@ -2,13 +2,13 @@ importance: 5 --- -# Tree menu +# 树形菜单 -Create a tree that shows/hides node children on click: +创建一个单击可以显示/隐藏子节点的树形菜单： [iframe border=1 src="solution"] -Requirements: +要求： -- Only one event handler (use delegation) -- A click outside the node title (on an empty space) should not do anything. +- 只有一个事件处理器（使用委托） +- 单击节点标题以外的地方（空白区域）不做任何处理。 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 ec85a473c8..92b25e9cfb 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 --- -# Sortable table +# 可排序表格 -Make the table sortable: clicks on `` elements should sort it by corresponding column. +让表格可以排序：单击 `` 元素让对应的列自动排序。 -Each `` has the type in the attribute, like this: +每个 `` 都有类型属性，如下所示： ```html @@ -32,12 +32,12 @@ Each `
` has the type in the attribute, like this:
``` -In the example above the first column has numbers, and the second one -- strings. The sorting function should handle sort according to the type. +在上面的例子中，第一列为数字，第二列为 —— 字符串。排序函数应根据类型进行排序。 -Only `"string"` and `"number"` types should be supported. +应该只支持 `"string"` 和 `"number"` 类型。 -The working example: +运行示例： [iframe border=1 src="solution" height=190] -P.S. The table can be big, with any number of rows and columns. +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 fc2462289c..6f72f372f5 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,35 +2,35 @@ importance: 5 --- -# Tooltip behavior +# 提示工具行为 -Create JS-code for the tooltip behavior. +为提示工具行为编写 JavaScript 代码。 -When a mouse comes over an element with `data-tooltip`, the tooltip should appear over it, and when it's gone then hide. +当鼠标移入带有 `data-tooltip` 的元素时,提示工具应该出现在它上面，移出时则隐藏起来 -An example of annotated HTML: +带有注释的 HTML 示例： ```html ``` -Should work like this: +运行结果如下： [iframe src="solution" height=200 border=1] -In this task we assume that all elements with `data-tooltip` have only text inside. No nested tags. +在这个任务中，我们假设所有具有 `data-tooltip` 的元素中只有文本。没有嵌套标签。 -Details: +详细资料： -- The tooltip should not cross window edges. Normally it should be above the element, but if the element is at the page top and there's no space for the tooltip, then below it. -- The tooltip is given in the `data-tooltip` attribute. It can be arbitrary HTML. +- 提示工具不应超出窗口边缘。通常，它应该在元素的上方，但是如果元素位于页面顶部，并且没有提示工具的空间，则在其下面。 +- 提示工具由 `data-tooltip` 属性中指定。它可以是任意 HTML。 -You'll need two events here: -- `mouseover` triggers when a pointer comes over an element. -- `mouseout` triggers when a pointer leaves an element. +你需要两个事件： +- `mouseover` 当指针出现在元素上时触发。 +- `mouseout` 当指针移出元素时触发。 -Please use event delegation: set up two handlers on `document` to track all "overs" and "outs" from elements with `data-tooltip` and manage tooltips from there. +请使用事件委托：在 `document` 上设置两个处理器，以跟踪带有 `data-tooltip` 的元素中所有的 "over" 和 "out"，并从那里管理提示工具。 -After the behavior is implemented, even people unfamiliar with JavaScript can add annotated elements. +在实现了该行为后，即使是不熟悉 JavaScript 的人也可以添加带注释的元素。 -P.S. To keep things natural and simple: only one tooltip may show up at a time. +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 16d9dc71a0..efd818cc8f 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,45 +30,45 @@ 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. +相比为每个 `
`（可能有很多）分配一个 `onclick` 处理器 —— 我们可以为 `` 元素设置一个 "catch-all" 处理器。 -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 + if (target.tagName != 'TD') return; // 不在 TD 上？那么我们就不会在意 - highlight(target); // highlight it + highlight(target); // 高亮显示 }; */!* function highlight(td) { - if (selectedTd) { // remove the existing highlight if any + if (selectedTd) { // 移除任何已存在的高亮显示内容 selectedTd.classList.remove('highlight'); } selectedTd = td; - selectedTd.classList.add('highlight'); // highlight the new td + selectedTd.classList.add('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` 的值。 ![](bagua-bubble.png) -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)` 方法返回与选择器匹配的最近的祖先。在我们的例子中，我们从源元素向上查找 ``。 +2. 如果 `event.target` 不在任何 `` 中，那么调用将返回 `null`，我们不需要做任何事情。 +3. 在嵌套表的情况下，`event.target` 可能是位于当前表格之外的 ``。因此我们需要检查这是否是**我们的表格**的 ``。 +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