Translation/bubbling and capturing#161
Translation/bubbling and capturing#161leviding merged 5 commits intojavascript-tutorial:zh-hansfrom Starriers:translation/bubbling-and-capturing
Conversation
update repo.
|
校对认领 @leviding |
|
@xunge0613 ok |
xunge0613
left a comment
There was a problem hiding this comment.
@Starriers @leviding 校对完毕
翻译得不错.... 不过我感觉这篇文章确实比较难翻... 有些句子我也拿捏不准..
| 冒泡原理很简单。 | ||
|
|
||
| **When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.** | ||
| **当事件发生元素上时，它首先会本身上运行处理器，然后会在父元素行运行，然后是其他的祖先**。 |
There was a problem hiding this comment.
当事件发生元素上时，它首先会本身上运行处理器，然后会在父元素行运行，然后是其他的祖先。
=>
当事件发生在元素上，它首先会运行元素本身的处理器，然后运行父元素上的，再然后是其他祖先上的。
| 单击内部 `<p>` 会首先运行 `onclick`： | ||
| 1. 在 `<p>` 上。 | ||
| 2. 然后是外部的 `<div>`。 | ||
| 3. 然后是外部的 `<form>`. |
There was a problem hiding this comment.
然后是外部的 <form>.
=>
再然后是外部的 <form>。
1 这样读起来可能好一些
2 句末标点
| 1. 在 `<p>` 上。 | ||
| 2. 然后是外部的 `<div>`。 | ||
| 3. 然后是外部的 `<form>`. | ||
| 4. 等等，直到最后的 `document` 对象。 |
There was a problem hiding this comment.
等等，直到最后的 document 对象。
=>
以此类推，直到最后的 document 对象。
这里译成“以此类推”感觉好一些
| 这个短语的关键词是“几乎”。 | ||
|
|
||
| For instance, a `focus` event does not bubble. There are other examples too, we'll meet them. But still it's an exception, rather than a rule, most events do bubble. | ||
| 例如，“焦点”事件不会冒泡。还有其他示例。我们会遇到的。但是这是例外，而不是规则，因为大多数事件都是冒泡的。 |
There was a problem hiding this comment.
“焦点”事件不会冒泡。
=>
focus 事件不会冒泡。
原文用的是 focus 表示代码的标点，建议保留原文
There was a problem hiding this comment.
有很多这样的类似 感觉可以直接翻译 但是有感觉不能翻译，所以大部分可能会交错翻译 😂
| 这个短语的关键词是“几乎”。 | ||
|
|
||
| For instance, a `focus` event does not bubble. There are other examples too, we'll meet them. But still it's an exception, rather than a rule, most events do bubble. | ||
| 例如，“焦点”事件不会冒泡。还有其他示例。我们会遇到的。但是这是例外，而不是规则，因为大多数事件都是冒泡的。 |
There was a problem hiding this comment.
还有其他示例。我们会遇到的。
=>
同样，我们以后还会遇到其他例子。
建议合并在一起
| - 如果为 `true`，则在捕获阶段设置处理器。 | ||
|
|
||
| Note that while formally there are 3 phases, the 2nd phase ("target phase": the event reached the element) is not handled separately: handlers on both capturing and bubbling phases trigger at that phase. | ||
| 注意，虽然形式上有 3 个阶段，但第 2 阶段（“target phase”：事件到达元素）没有单独被处理：捕获阶段和冒泡阶段的处理器在该阶段被触发。 |
There was a problem hiding this comment.
捕获阶段和冒泡阶段的处理器在该阶段被触发。
=>
捕获阶段和冒泡阶段的处理器在该阶段都会被触发。
建议把 both 翻译出来
| ``` | ||
|
|
||
| The code sets click handlers on *every* element in the document to see which ones are working. | ||
| 代码集单击文档中的**每个**元素上的处理器，来查看哪些元素正在工作。 |
There was a problem hiding this comment.
代码集单击文档中的每个元素上的处理器，来查看哪些元素正在工作。
=>
代码为文档中的每个元素设置点击处理程序，以查看哪些元素上的点击事件处理器生效了。
set 这里是动词，不是代码集；click handler 是一个名词..
这里 ones 应该指代的是 click handlers
| - Then the event moves from `event.target` up to the root, calling handlers assigned using `on<event>` and `addEventListener` without the 3rd argument or with the 3rd argument `false`. | ||
| - 当事件发生时 —— 嵌套最深的那个元素被标记为 "target element" (`event.target`)。 | ||
| - 然后事件首先从文档根向下移动到 `event.target`，过程中调用分配给 `addEventListener(...., true)` 的处理器。 | ||
| - 然后事件从 `event.target` 向上移动到根，调用使用 `on<event>` 和 `addEventListener` 分配的处理器，不使用第三个参数或第三个参数设置为 `false`。 |
There was a problem hiding this comment.
然后事件从 event.target 向上移动到根，调用使用 on<event> 和 addEventListener 分配的处理器，不使用第三个参数或第三个参数设置为 false。
=>
再然后事件从 event.target 向上移动到根节点，调用使用 on<event> 和 addEventListener 分配的处理器，不使用第三个参数或第三个参数设置为 false。
| 现实世界中，当事故发生时，当地警方第一时间作出反应。他们最了解发生这件事的地方。如果需要更高级别的权威。那么就会向上申请。 | ||
|
|
||
| The same for event handlers. The code that set the handler on a particular element knows maximum details about the element and what it does. A handler on a particular `<td>` may be suited for that exactly `<td>`, it knows everything about it, so it should get the chance first. Then its immediate parent also knows about the context, but a little bit less, and so on till the very top element that handles general concepts and runs the last. | ||
| 事件处理却也是如此。在特定元素上设置处理器的代码知道元素的最大细节以及它所做的事情。特定 `<td>` 上的处理器可能恰好适合于 `<td>`，它知道关于它的一切。所以它应该首先获得机会。然后，它的直系父节点也会获取上下文，但是会少一些，等等。知道处理一般概念并运行最后一个上面的元素。 |
There was a problem hiding this comment.
在特定元素上设置处理器的代码知道元素的最大细节以及它所做的事情。
=>
在特定元素上设置处理器的代码了解该元素最详尽的信息。
what it does 感觉不用翻译也可..
| In real world, when an accident happens, local authorities react first. They know best the area where it happened. Then higher-level authorities if needed. | ||
| 现实世界中，当事故发生时，当地警方第一时间作出反应。他们最了解发生这件事的地方。如果需要更高级别的权威。那么就会向上申请。 | ||
|
|
||
| The same for event handlers. The code that set the handler on a particular element knows maximum details about the element and what it does. A handler on a particular `<td>` may be suited for that exactly `<td>`, it knows everything about it, so it should get the chance first. Then its immediate parent also knows about the context, but a little bit less, and so on till the very top element that handles general concepts and runs the last. |
There was a problem hiding this comment.
等等。知道处理一般概念并运行最后一个上面的元素。
=>
以此类推。而最顶层的元素最后才获取到信息，且只能了解到大致的情况。
#155 翻译完成