You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-**DOM Living Standard**：<https://dom.spec.whatwg.org>
52
+
在这里，我们使用了 `document.body.style`，但还有很多很多其他的东西。规范中有属性和方法的详细描述：[DOM Living Standard](https://dom.spec.whatwg.org)。
55
53
56
54
```smart header="DOM 不仅仅用于浏览器"
57
55
DOM 规范解释了文档的结构，并提供了操作文档的对象。有的非浏览器设备也使用 DOM。
@@ -60,9 +58,9 @@ DOM 规范解释了文档的结构，并提供了操作文档的对象。有的
60
58
```
61
59
62
60
```smart header="用于样式的 CSSOM"
63
-
CSS 规则和样式表的结构与 HTML 不同。有一个单独的规范 [CSS Object Model (CSSOM)](https://www.w3.org/TR/cssom-1/)，它解释了如何将 CSS 表示为对象，以及如何读写它们。
61
+
There's also a separate specification, [CSS Object Model (CSSOM)](https://www.w3.org/TR/cssom-1/) for CSS rules and stylesheets, that explains how they are represented as objects, and how to read and write them.
当我们修改文档的样式规则时，CSSOM 与 DOM 是一起使用的。但实际上，很少需要 CSSOM，因为 we rarely need to modify CSS rules from JavaScript (usually we just add/remove CSS classes, not modify their CSS rules), but that's also possible.
为了让 `div` 显示出来，我们需要将其插入到 `document` 中的某处。例如，into `<body>` element, referenced by `document.body`.
66
73
67
74
对此有一个特殊的方法 `append`：`document.body.append(div)`。
68
75
@@ -90,14 +97,20 @@ div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
90
97
</script>
91
98
```
92
99
93
-
下面这些方法提供了更多的插入方式：
100
+
Here we called `append` on `document.body`, but we can call `append` method on any other element, to put another element into it. For instance, we can append something to `<div>` by calling `div.append(anotherElement)`.
94
101
95
-
-`node.append(...nodes or strings)` — 在 `node` 末尾插入节点或字符串，
96
-
-`node.prepend(...nodes or strings)` — 在 `node` 开头插入节点或字符串，
97
-
-`node.before(...nodes or strings)` — 在 `node` 前面插入节点或字符串，
98
-
-`node.after(...nodes or strings)` — 在 `node` 后面插入节点或字符串，
102
+
Here are more insertion methods, they specify different places where to insert:
103
+
104
+
-`node.append(...nodes or strings)` — 在 `node`**末尾** 插入节点或字符串，
105
+
-`node.prepend(...nodes or strings)` — 在 `node`**开头** 插入节点或字符串，
106
+
-`node.before(...nodes or strings)` — 在 `node`**前面** 插入节点或字符串，
107
+
-`node.after(...nodes or strings)` — 在 `node`**后面** 插入节点或字符串，
99
108
-`node.replaceWith(...nodes or strings)` — 将 `node` 替换为给定的节点或字符串。
100
109
110
+
Arguments of these methods are an arbitrary list of DOM nodes to insert, or text strings (that become text nodes automatically).
111
+
112
+
Let's see them in action.
113
+
101
114
下面是使用这些方法将列表项添加到列表中，以及将文本添加到列表前面和后面的示例：
102
115
103
116
```html autorun
@@ -139,7 +152,7 @@ before
139
152
after
140
153
```
141
154
142
-
这些方法可以在单个调用中插入多个节点列表和文本片段。
155
+
如上所述，这些方法可以在单个调用中插入多个节点列表和文本片段。
143
156
144
157
例如，在这里插入了一个字符串和一个元素：
145
158
@@ -150,7 +163,7 @@ after
150
163
</script>
151
164
```
152
165
153
-
所有内容都被“作为文本”插入。
166
+
Please note: the text is inserted "as text", not "as HTML", with proper escaping of characters such as `<`, `>`.
154
167
155
168
所以，最终的 HTML 为：
156
169
@@ -166,7 +179,7 @@ after
166
179
167
180
所以，这些方法只能用来插入 DOM 节点或文本片段。
168
181
169
-
但是，如果我们想在所有标签和内容正常工作的情况下，将这些内容“作为 HTML” 插入到 HTML 中，就像 `elem.innerHTML`方法一样，那有什么方法可以实现吗？
182
+
But what if we'd like to insert an HTML string "as html", with all tags and stuff working, in the same manner as `elem.innerHTML`does it?
Copy file name to clipboardExpand all lines: 2-ui/2-events/01-introduction-browser-events/article.md
+37-38
Original file line number
Diff line number
Diff line change
@@ -11,13 +11,13 @@
11
11
-`mousedown` / `mouseup` —— 当在元素上按下/释放鼠标按钮时。
12
12
-`mousemove` —— 当鼠标移动时。
13
13
14
+
**键盘事件**：
15
+
-`keydown` and `keyup` -- when a keyboard key is pressed and released.
16
+
14
17
**表单（form）元素事件**：
15
18
-`submit` —— 当访问者提交了一个 `<form>` 时。
16
19
-`focus` —— 当访问者聚焦于一个元素时，例如聚焦于一个 `<input>`。
17
20
18
-
**键盘事件**：
19
-
-`keydown` 和 `keyup` —— 当访问者按下然后松开按键时。
20
-
21
21
**Document 事件**：
22
22
-`DOMContentLoaded` —— 当 HTML 的加载和处理均完成，DOM 被完全构建完成时。
23
23
@@ -87,8 +87,6 @@ HTML 特性不是编写大量代码的好位置，因此我们最好创建一个
87
87
88
88
因此，这种方法实际上与前一种方法相同。
89
89
90
-
**处理程序总是在 DOM 属性中：HTML 特性只是初始化它的方法之一**。
91
-
92
90
这两段代码工作相同：
93
91
94
92
1. 只有 HTML：
@@ -109,6 +107,8 @@ HTML 特性不是编写大量代码的好位置，因此我们最好创建一个
109
107
</script>
110
108
```
111
109
110
+
In the first example, the HTML attribute is used to initialize the `button.onclick`, while in the second example -- the script, that's all the difference.
111
+
112
112
**因为这里只有一个 `onclick` 属性，所以我们无法分配更多事件处理程序。**
113
113
114
114
在下面这个示例中，我们使用 JavaScript 添加了一个处理程序，覆盖了现有的处理程序：
@@ -124,16 +124,6 @@ HTML 特性不是编写大量代码的好位置，因此我们最好创建一个
124
124
</script>
125
125
```
126
126
127
-
顺便说一下，我们可以直接将现有的函数指定为处理程序：
128
-
129
-
```js
130
-
functionsayThanks() {
131
-
alert('Thanks!');
132
-
}
133
-
134
-
elem.onclick= sayThanks;
135
-
```
136
-
137
127
要移除一个处理程序 —— 赋值 `elem.onclick = null`。
138
128
139
129
## 访问元素：this
@@ -150,7 +140,17 @@ elem.onclick = sayThanks;
150
140
151
141
如果你刚开始写事件 —— 请注意一些细微之处。
152
142
153
-
**函数应该被以 `sayThanks` 的形式进行非配，而不是 `sayThanks()`**。
143
+
We can set an existing function as a handler:
144
+
145
+
```js
146
+
functionsayThanks() {
147
+
alert('Thanks!');
148
+
}
149
+
150
+
elem.onclick= sayThanks;
151
+
```
152
+
153
+
But be careful: the function should be assigned as `sayThanks`, not `sayThanks()`.
0 commit comments