javascript-tutorial · leviding · Mar 30, 2020 · Mar 29, 2020 · Mar 29, 2020 · Mar 29, 2020
diff --git a/1-js/09-classes/06-instanceof/article.md b/1-js/09-classes/06-instanceof/article.md
@@ -1,4 +1,4 @@
-# 类型检查："instanceof"
+# 类检查："instanceof"
 
 `instanceof` 操作符用于检查一个对象是否属于某个特定的 class。同时，它还考虑了继承。
 
@@ -215,4 +215,4 @@ alert( {}.toString.call(new XMLHttpRequest()) ); // [object XMLHttpRequest]
 
 正如我们所看到的，从技术上讲，`{}.toString` 是一种“更高级的” `typeof`。
 
-当我们使用多层类结构，并想要对该类进行检查，同时还要考虑继承时，这种场景下 `instanceof` 运算符确实很出色。
+当我们使用类的层次结构（hierarchy），并想要对该类进行检查，同时还要考虑继承时，这种场景下 `instanceof` 操作符确实很出色。
diff --git a/1-js/10-error-handling/2-custom-errors/article.md b/1-js/10-error-handling/2-custom-errors/article.md
@@ -6,7 +6,7 @@
 
 JavaScript 允许将 `throw` 与任何参数一起使用，所以从技术上讲，我们自定义的 error 不需要继承从 `Error` 中继承。但是，如果我们继承，那么就可以使用 `obj instanceof Error` 来识别 error 对象。因此，最好继承它。
 
-随着虽开发的应用程序的增长，我们自己的 error 自然会形成形成一个层次结构。例如，`HttpTimeoutError` 可能继承自 `HttpError`，等等。
+随着虽开发的应用程序的增长，我们自己的 error 自然会形成形成一个层次结构（hierarchy）。例如，`HttpTimeoutError` 可能继承自 `HttpError`，等等。
 
 ## 扩展 Error
 

diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md
@@ -103,7 +103,7 @@
 这个方法确实功能强大，因为可以使用任何 CSS 选择器。
 
 ```smart header="也可以使用伪类"
-CSS 选择器的伪类，例如 `:hover` 和 `:active` 也都是被支持的。例如，`document.querySelectorAll(':hover')` 将会返回指针现在已经结束的元素的集合（按嵌套顺序：从最外层 `<html>` 到嵌套最多的元素）。
+CSS 选择器的伪类，例如 `:hover` 和 `:active` 也都是被支持的。例如，`document.querySelectorAll(':hover')` 将会返回鼠标指针现在已经结束的元素的集合（按嵌套顺序：从最外层 `<html>` 到嵌套最多的元素）。
 ```
 
 ## querySelector [#querySelector]

diff --git a/2-ui/1-document/09-size-and-scroll/article.md b/2-ui/1-document/09-size-and-scroll/article.md
@@ -53,7 +53,7 @@ JavaScript 中有许多属性可让我们读取有关元素宽度、高度和其
 
 ## offsetParent，offsetLeft/Top
 
-这些属性很少使用，但它们仍然是“最外层”的几何属性，所以我们将从它们开始。
+这些属性很少使用，但它们仍然是“最外面”的几何属性，所以我们将从它们开始。
 
 `offsetParent` 是最接近的祖先（ancestor），在浏览器渲染期间，它被用于计算坐标。
 

diff --git a/2-ui/1-document/10-size-and-scroll-window/article.md b/2-ui/1-document/10-size-and-scroll-window/article.md
@@ -2,7 +2,7 @@
 
 我们如何找到浏览器窗口（window）的宽度和高度呢？我们如何获得文档（document）的包括滚动部分在内的完整宽度和高度呢？我们如何使用 JavaScript 滚动页面？
 
-对于大多数此类请求，我们可以使用与 `<html>` 标签相对应的根文档元素 `document.documentElement`。但是还有很多其他方法，这些方法和特性非常重要，值得我们考虑。  
+对于大多数此类请求，我们可以使用与 `<html>` 标签相对应的根文档元素 `document.documentElement`。但是还有很多其他方法，这些方法和特性非常重要，值得我们考虑。
 
 ## 窗口的 width/height
 
@@ -33,7 +33,7 @@ alert( document.documentElement.clientWidth ); // 减去滚动条宽度后的窗
 ````
 
 ```warn header="`DOCTYPE` 很重要"
-请注意：当 HTML 中没有 `<!DOCTYPE HTML>` 时，顶层几何属性的工作方式可能就会有所不同。可能会出现一些稀奇古怪的情况。
+请注意：当 HTML 中没有 `<!DOCTYPE HTML>` 时，顶层级（top-level）几何属性的工作方式可能就会有所不同。可能会出现一些稀奇古怪的情况。
 
 在现代 HTML 中，我们始终都应该写 `DOCTYPE`。
 ```

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
@@ -10,7 +10,7 @@ importance: 5
 
 要求：
 
-- 球的中心应该恰好在点击时指针位置的下方（如果在球不越过球场边缘的情况下，能实现的话）。
+- 球的中心应该恰好在点击时鼠标指针位置的下方（如果在球不越过球场边缘的情况下，能实现的话）。
 - 最好添加一些 CSS 动画。
 - 球不能越过场地边界。
 - 页面滚动时，不会有任何中断。

diff --git a/2-ui/2-events/02-bubbling-and-capturing/article.md b/2-ui/2-events/02-bubbling-and-capturing/article.md
@@ -210,7 +210,7 @@ elem.addEventListener("click", e => alert(2));
 
 每个处理程序都可以访问 `event` 对象的属性：
 
-- `event.target` —— 引发事件的最深层的元素。
+- `event.target` —— 引发事件的层级最深的元素。
 - `event.currentTarget`（=`this`）—— 处理事件的当前元素（具有处理程序的元素）
 - `event.eventPhase` —— 当前阶段（capturing=1，target=2，bubbling=3）。
 
@@ -220,6 +220,6 @@ elem.addEventListener("click", e => alert(2));
 
 在现实世界中，当事故发生时，当地警方会首先做出反应。他们最了解发生这件事的地方。然后，如果需要，上级主管部门再进行处理。
 
-事件处理程序也是如此。在特定元素上设置处理程序的代码，了解有关该元素最详尽的信息。特定于 `<td>` 的处理程序可能恰好适合于该 `<td>`，这个处理程序知道关于该元素的所有信息。所以该处理程序应该首先获得机会。然后，它的直接父元素也了解相关上下文，但了解的内容会少一些，以此类推，直到处理一般性概念并最后运行的最顶层的元素为止。
+事件处理程序也是如此。在特定元素上设置处理程序的代码，了解有关该元素最详尽的信息。特定于 `<td>` 的处理程序可能恰好适合于该 `<td>`，这个处理程序知道关于该元素的所有信息。所以该处理程序应该首先获得机会。然后，它的直接父元素也了解相关上下文，但了解的内容会少一些，以此类推，直到处理一般性概念并最后运行的最顶部的元素为止。
 
 冒泡和捕获为“事件委托”奠定了基础 —— 一种非常强大的事件处理模式，我们将在下一章中进行研究。
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
@@ -29,7 +29,7 @@ importance: 5
 
 在这里你将需要两个事件：
 - `mouseover` 当鼠标指针出现在元素上方时触发。
-- `mouseout` 当指针离开元素时触发。
+- `mouseout` 当鼠标指针离开元素时触发。
 
 请使用事件委托：在 `document` 上设置两个处理程序，以跟踪带有 `data-tooltip` 的元素中的所有 "over" 和 "out"，并从那里管理工具提示。
 

diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md
@@ -8,7 +8,7 @@
 
 ## 事件构造器
 
-内建事件类形成一个层次结构，类似于 DOM 元素类。根是内建的 [Event](http://www.w3.org/TR/dom/#event) 类。
+内建事件类形成一个层次结构（hierarchy），类似于 DOM 元素类。根是内建的 [Event](http://www.w3.org/TR/dom/#event) 类。
 
 我们可以像这样创建 `Event` 对象：
 

diff --git a/2-ui/3-event-details/1-mouse-events-basics/article.md b/2-ui/3-event-details/1-mouse-events-basics/article.md
@@ -194,4 +194,4 @@ Before...
 
 `mousedown` 的默认浏览器操作是文本选择，如果它对界面不利，则应避免它。
 
-在下一章中，我们将看到有关指针移动后的事件，以及如何跟踪其下元素变化的更多详细信息。
+在下一章中，我们将看到有关鼠标指针移动后的事件，以及如何跟踪其下元素变化的更多详细信息。
diff --git a/...3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/...3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
@@ -52,7 +52,7 @@
 
 另一方面，我们应该记住，鼠标指针并不会“访问”所有元素。它可以“跳过”一些元素。
 
-特别是，指针可能会从窗口外跳到页面的中间。在这种情况下，`relatedTarget` 为 `null`，因为它是从石头缝里蹦出来的（nowhere）：
+特别是，鼠标指针可能会从窗口外跳到页面的中间。在这种情况下，`relatedTarget` 为 `null`，因为它是从石头缝里蹦出来的（nowhere）：
 
 ![](mouseover-mouseout-from-outside.svg)
 
@@ -61,26 +61,26 @@
 
 它的 HTML 有两个嵌套的元素：`<div id="child">` 在 `<div id="parent">` 内部。如果将鼠标快速移动到它们上，则可能只有 `<div id="child">` 或者只有 `<div id="parent">` 触发事件，或者根本没有事件触发。 
 
-还可以将指针移动到 `<div id="child">` 中，然后将其快速向下移动过其父级元素。如果移动速度足够快，则父元素就会被忽略。鼠标会越过父元素而不会引起其注意。
+还可以将鼠标指针移动到 `<div id="child">` 中，然后将其快速向下移动过其父级元素。如果移动速度足够快，则父元素就会被忽略。鼠标会越过父元素而不会引起其注意。
 
 [codetabs height=360 src="mouseoverout-fast"]
 ```
 
 ```smart header="如果 `mouseover` 被触发了，则必须有 `mouseout`"
-在鼠标快速移动的情况下，中间元素可能会被忽略，但是我们可以肯定一件事：如果指针“正式地”进入了一个元素（生成了 `mouseover` 事件），那么一旦它离开，我们就会得到 `mouseout`。
+在鼠标快速移动的情况下，中间元素可能会被忽略，但是我们可以肯定一件事：如果鼠标指针“正式地”进入了一个元素（生成了 `mouseover` 事件），那么一旦它离开，我们就会得到 `mouseout`。
 ```
 
 ## 当移动到一个子元素时 mouseout
 
-`mouseout` 的一个重要功能 —— 当指针从元素移动到其后代时触发，例如在下面的这个 HTML 中，从 `#parent` 到 `#child`：
+`mouseout` 的一个重要功能 —— 当鼠标指针从元素移动到其后代时触发，例如在下面的这个 HTML 中，从 `#parent` 到 `#child`：
 
 ```html
 <div id="parent">
   <div id="child">...</div>
 </div>
 ```
 
-如果我们在 `#parent` 上，然后将指针更深入地移入 `#child`，但是在 `#parent` 上会得到 `mouseout`！
+如果我们在 `#parent` 上，然后将鼠标指针更深入地移入 `#child`，但是在 `#parent` 上会得到 `mouseout`！
 
 ![](mouseover-to-child.svg)
 
@@ -106,7 +106,7 @@
 [codetabs height=360 src="mouseoverout-child"]
 ```
 
-如上例所示，当指针从 `#parent` 元素移动到 `#child` 时，会在父元素上触发两个处理程序：`mouseout` 和 `mouseover`：
+如上例所示，当鼠标指针从 `#parent` 元素移动到 `#child` 时，会在父元素上触发两个处理程序：`mouseout` 和 `mouseover`：
 
 ```js
 parent.onmouseout = function(event) {
@@ -119,9 +119,9 @@ parent.onmouseover = function(event) {
 
 **如果我们不检查处理程序中的 `event.target`，那么似乎鼠标指针离开了 `#parent` 元素，然后立即回到了它上面。**
 
-但是事实并非如此！指针仍然位于父元素上，它只是更深入地移入了子元素。
+但是事实并非如此！鼠标指针仍然位于父元素上，它只是更深入地移入了子元素。
 
-如果离开父元素时有一些行为（action），例如一个动画在 `parent.onmouseout` 中运行，当指针深入 `#parent` 时，我们并不希望发生这种行为。
+如果离开父元素时有一些行为（action），例如一个动画在 `parent.onmouseout` 中运行，当鼠标指针深入 `#parent` 时，我们并不希望发生这种行为。
 
 为了避免它，我们可以在处理程序中检查 `relatedTarget`，如果鼠标指针仍在元素内，则忽略此类事件。
 
@@ -138,14 +138,14 @@ parent.onmouseover = function(event) {
 
 这些事件非常简单。
 
-当指针进入一个元素时 —— 会触发 `mouseenter`。而指针在元素或其后代中的确切位置无关紧要。
+当鼠标指针进入一个元素时 —— 会触发 `mouseenter`。而鼠标指针在元素或其后代中的确切位置无关紧要。
 
 当鼠标指针离开该元素时，事件 `mouseleave` 才会触发。
 
 ```online
-这个例子和上面的例子相似，但是现在最顶层的元素有 `mouseenter/mouseleave` 而不是 `mouseover/mouseout`。
+这个例子和上面的例子相似，但是现在最顶部的元素有 `mouseenter/mouseleave` 而不是 `mouseover/mouseout`。
 
-正如你所看到的，唯一生成的事件是与将指针移入或移出顶部元素有关的事件。当指针进入 child 并返回时，什么也没发生。在后代之间的移动会被忽略。
+正如你所看到的，唯一生成的事件是与将鼠标指针移入或移出顶部元素有关的事件。当鼠标指针进入 child 并返回时，什么也没发生。在后代之间的移动会被忽略。
 
 [codetabs height=340 src="mouseleave"]
 ```
@@ -158,14 +158,14 @@ parent.onmouseover = function(event) {
 
 通常的解决方案是 —— 在 `<table>` 中设置处理程序，并在那里处理事件。但 `mouseenter/leave` 不会冒泡。因此，如果类似的事件发生在 `<td>` 上，那么只有 `<td>` 上的处理程序才能捕获到它。
 
-`<table>` 上的 `mouseenter/leave` 的处理程序仅在指针进入/离开整个表格时才会触发。无法获取有关其内部移动的任何信息。
+`<table>` 上的 `mouseenter/leave` 的处理程序仅在鼠标指针进入/离开整个表格时才会触发。无法获取有关其内部移动的任何信息。
 
 因此，让我们使用 `mouseover/mouseout`。
 
-让我们从突出显示鼠标指针下的元素的简单处理程序开始：
+让我们从高亮显示鼠标指针下的元素的简单处理程序开始：
 
 ```js
-// 突出显示鼠标指针下的元素
+// 高亮显示鼠标指针下的元素
 table.onmouseover = function(event) {
   let target = event.target;
   target.style.background = 'pink';
@@ -178,7 +178,7 @@ table.onmouseout = function(event) {
 ```
 
 ```online
-现在它们已经激活了。当鼠标在下面这个表格的各个元素上移动时，当前位于鼠标指针下的元素会被突出显示：
+现在它们已经激活了。当鼠标在下面这个表格的各个元素上移动时，当前位于鼠标指针下的元素会被高亮显示：
 
 [codetabs height=480 src="mouseenter-mouseleave-delegation"]
 ```
@@ -197,14 +197,14 @@ table.onmouseout = function(event) {
 
 再次，重要的功能是：
 1. 它使用事件委托来处理表格中任何 `<td>` 的进入/离开。因此，它依赖于 `mouseover/out` 而不是 `mouseenter/leave`，`mouseenter/leave` 不会冒泡，因此也不允许事件委托。
-2. 额外的事件，例如在 `<td>` 的后代之间移动都会被过滤掉，因此 `onEnter/Leave` 仅在指针进入/离开 `<td>` 整体时才会运行。
+2. 额外的事件，例如在 `<td>` 的后代之间移动都会被过滤掉，因此 `onEnter/Leave` 仅在鼠标指针进入/离开 `<td>` 整体时才会运行。
 
 ```online
 这是带有所有详细信息的完整示例：
 
 [codetabs height=460 src="mouseenter-mouseleave-delegation-2"]
 
-尝试将鼠标指针移入和移出表格单元格及其内部。快还是慢都没关系。与前面的示例不同，只有 `<td>` 被作为一个整体突出显示。
+尝试将鼠标指针移入和移出表格单元格及其内部。快还是慢都没关系。与前面的示例不同，只有 `<td>` 被作为一个整体高亮显示。
 ```
 
 ## 总结

diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md
@@ -1,4 +1,5 @@
+正如我们从 HTML/CSS 中所看到的，滑动条就是一个带有彩色北京的 `<div>`，其中包含一个滑块 —— 另一个具有 `position:relative` 的 `<div>`。
 
-我们这里有一个水平拖放。
+为了对滑块进行定位，我们使用 `position:relative` 来提供相对于其父元素的坐标，在这儿它比 `position:absolute` 更方便。
 
-我们使用 `position:relative` 和滚动条的相对坐标的 thumb 来定位元素。这里比 `position:absolute` 更方便。
+然后我们通过限制宽度来实现仅水平方向的拖放。
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md
@@ -2,15 +2,15 @@ importance: 5
 
 ---
 
-# 滚动条
+# 滑动条
 
-创建一个滚动条
+创建一个滑动条（slider）：
 
 [iframe src="solution" height=60 border=1]
 
-用鼠标拖动蓝色 thumb 并移动它。
+用鼠标拖动蓝色的滑块（thumb）并移动它。
 
 重要的细节：
 
-- 在按住鼠标进行拖动时，鼠标可能会越过滚动条的上下边界，滑块应该还在继续移动（对用户来说，这非常方便）。
-- 如果鼠标在移动到左边或右边的速度非常快，那么 thumb 应该完全停在边缘。
+- 当鼠标按钮被按下时，在滑动过程中，鼠标指针可能会移动到滑块的上方或下方。此时滑块仍会继续移动（方便用户）。
+- 如果鼠标非常快地向左边或者向右边移动，那么滑块应该恰好停在边缘。
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md
@@ -1,5 +1,5 @@
-我们应该把属性切换回 `position:fixed` 来拖动它，它让坐标管理更简单。最后，我们应该使用 `position:absolute`。
+要拖动元素，我们可以使用 `position:fixed`，它使坐标更易于管理。最后，我们应该将其切换回 `position:absolute`，以使元素放置到文档中。
 
-然后，当坐标位于窗口顶部/底部时，我们使用 `window.scrollTo` 滚动它。
+当坐标位于窗口顶端/底端时，我们使用 `window.scrollTo` 来滚动它。
 
-注释中有更多关于代码的细节。
+更多细节请见代码注释。
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/index.html b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/index.html
@@ -8,17 +8,17 @@
 
 <body>
 
-  <h2>Place superheroes around the soccer field.</h2>
+  <h2>将超级英雄放置在足球场周围。</h2>
 
-  <p>Superheroes and the ball are elements with the class "draggable". Make them really draggable.</p>
+  <p>超级英雄和球都是带有 "draggable" 类的元素。使它们真的可拖动（draggable）。</p>
 
-  <p>Important: limit dragging by the window. If a draggable reaches window top or bottom, then the page should scroll to let us drag it further.</p>
+  <p>重要：通过窗口限制拖动。如果可拖动的元素被拖到窗口的顶端或末端，则页面应该滚动以让我们进一步拖动它。</p>
 
-  <p>If your screen is big enough to fit the whole document -- make the window smaller to get vertical scrolling, so that you could test it.</p>
+  <p>如果你的屏幕足够大，能够把整个文档都显示出来 —— 那么请缩小窗口以进行垂直滚动，以便对此进行测试。</p>
 
-  <p>In this task it's enough to handle vertical scrolling. There's no horizontal scrolling usually, and it's handled the similar way if needed.</p>
+  <p>在此任务中，处理垂直滚动就够了。通常没有水平滚动，并且在需要时可以采用类似的方式进行处理。</p>
 
-  <p>And one more thing: heroes may never leave the page. If they reach the edge of the document, no dragging outside of it.</p>
+  <p>此外：英雄永远都不会离开页面。如果它们到达了文档的边缘，它们不会被拖动到文档外。</p>
 
   <div id="field">
Original file line number	Diff line number	Diff line change
Expand Up		@@ -194,4 +194,4 @@ Before...

		`mousedown` 的默认浏览器操作是文本选择，如果它对界面不利，则应避免它。

		在下一章中，我们将看到有关指针移动后的事件，以及如何跟踪其下元素变化的更多详细信息。
		在下一章中，我们将看到有关鼠标指针移动后的事件，以及如何跟踪其下元素变化的更多详细信息。