Skip to content

Commit 6db9598

Browse files
jaywcjlovejaywcjlove
committed
doc: add oncanplaythrough/onchange document.
1 parent 88d721e commit 6db9598

File tree

3 files changed

+166
-10
lines changed

3 files changed

+166
-10
lines changed

‎.idoc/.filesStat.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3630,15 +3630,15 @@
36303630
"birthtime": "2022-05-29T10:18:16.994Z"
36313631
},
36323632
"docs/attribute/oncanplaythrough.md": {
3633-
"atime": "2022-04-29T15:27:16.649Z",
3634-
"mtime": "2022-04-29T15:26:49.651Z",
3635-
"ctime": "2022-04-29T15:26:49.651Z",
3633+
"atime": "2022-06-26T03:44:36.674Z",
3634+
"mtime": "2022-06-26T03:44:37.180Z",
3635+
"ctime": "2022-06-26T03:44:37.180Z",
36363636
"birthtime": "2022-04-24T09:54:54.966Z"
36373637
},
36383638
"docs/attribute/onchange.md": {
3639-
"atime": "2022-04-29T15:27:17.129Z",
3640-
"mtime": "2022-04-29T15:26:49.653Z",
3641-
"ctime": "2022-04-29T15:26:49.653Z",
3639+
"atime": "2022-06-26T04:01:09.500Z",
3640+
"mtime": "2022-06-26T04:01:09.714Z",
3641+
"ctime": "2022-06-26T04:01:09.714Z",
36423642
"birthtime": "2022-04-24T09:54:54.966Z"
36433643
},
36443644
"docs/attribute/onclick.md": {

‎docs/attribute/oncanplaythrough.md‎

Lines changed: 78 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,80 @@
1-
oncanplaythrough.md
1+
HTML oncanplaythrough 属性
22
===
33

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/attribute/oncanplaythrough.md">docs/attribute/oncanplaythrough.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 定义和用法
5+
6+
`oncanplaythrough` 事件发生在浏览器估计它可以播放指定的 audio/video 而无需停止缓冲时。
7+
8+
## 适用于
9+
10+
`oncanplaythrough` 属性是 [事件属性](../reference/eventattributes.md) 的一部分，可用于以下元素：
11+
12+
| 元素 | 事件 |
13+
| --- | --- |
14+
| [\<audio>](../tags/audio.md) | [canplaythrough](../reference/av/event/canplaythrough.md) |
15+
| [\<video>](../tags/video.md) | [canplaythrough](../reference/av/event/canplaythrough.md) |
16+
<!--rehype:style=width: 100%; display: inline-table;-->
17+
18+
## 示例
19+
20+
### Audio 示例
21+
22+
当音频准备好开始播放时运行 `myFunction`：
23+
24+
```html
25+
<audio oncanplaythrough="myFunction()">
26+
```
27+
28+
29+
```html idoc:preview:iframe
30+
<script>
31+
function myFunction() {
32+
alert("可以开始播放音频");
33+
}
34+
</script>
35+
<audio controls oncanplaythrough="myFunction()">
36+
<source type="audio/ogg" src="horse.ogg">
37+
<source src="../assets/horse.ogg" type="audio/ogg">
38+
<source src="../assets/horse.mp3" type="audio/mpeg">
39+
您的浏览器不支持音频标签。
40+
</audio>
41+
```
42+
43+
44+
### Video 示例
45+
46+
当视频准备好开始播放时运行 `myFunction`：
47+
48+
```html
49+
<video oncanplaythrough="myFunction()">
50+
```
51+
52+
```html idoc:preview:iframe
53+
<script>
54+
function myFunction() {
55+
alert("可以开始播放视频了");
56+
}
57+
</script>
58+
<video width="320" controls oncanplaythrough="myFunction()">
59+
<source type="video/mp4" src="../assets/mov_bbb.mp4">
60+
<source type="video/ogm" src="../assets/mov_bbb.ogm">
61+
您的浏览器不支持 video 标签。
62+
</video>
63+
```
64+
65+
## 浏览器支持
66+
67+
`oncanplaythrough` 属性对每个元素都有以下浏览器支持：
68+
69+
| 元素 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
70+
| --- | --- | --- | --- | --- | --- |
71+
| audio | Yes | 9.0 | Yes | Yes | Yes |
72+
| video | Yes | 9.0 | Yes | Yes | Yes |
73+
<!--rehype:style=width: 100%; display: inline-table;-->
74+
75+
76+
[1]: ../assets/chrome.svg
77+
[2]: ../assets/edge.svg
78+
[3]: ../assets/firefox.svg
79+
[4]: ../assets/safari.svg
80+
[5]: ../assets/opera.svg

‎docs/attribute/onchange.md‎

Lines changed: 82 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,84 @@
1-
onchange.md
1+
HTML onchange 属性
22
===
33

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/attribute/onchange.md">docs/attribute/onchange.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 定义和用法
5+
6+
`onchange` 属性会在元素的值发生更改时触发。
7+
8+
**提示：** 此事件类似于 `oninput` 事件。 不同之处在于，`oninput` 事件会在元素的值发生更改后立即发生，而 `onchange` 会在元素失去焦点时发生。 另一个区别是 `onchange` 事件也适用于 `<select>` 元素。
9+
10+
## 适用于
11+
12+
`onchange` 属性是 [事件属性](../reference/attributes.md) 的一部分，可用于任何 HTML 元素。
13+
14+
| 元素 | 事件 |
15+
| --- | --- |
16+
| 所有 HTML 元素 | [onchange](../events/onchange.md) |
17+
<!--rehype:style=width: 100%; display: inline-table;-->
18+
19+
## 示例
20+
21+
### Select 示例
22+
23+
当用户更改 \<select> 元素的选定选项时执行 JavaScript：
24+
25+
26+
```html
27+
<select onchange="myFunction()">
28+
```
29+
30+
```html idoc:preview:iframe
31+
<select id="mySelect" onchange="myFunction()">
32+
<option value="Audi">Audi
33+
<option value="BMW">BMW
34+
<option value="Mercedes">Mercedes
35+
<option value="Volvo">Volvo
36+
</select>
37+
<p>
38+
当您选择一辆新车时，会触发一个函数，该函数会输出所选汽车的值。
39+
</p>
40+
<p id="demo"></p>
41+
<script>
42+
function myFunction() {
43+
var x = document.getElementById("mySelect").value;
44+
document.getElementById("demo").innerHTML = "You selected: " + x;
45+
}
46+
</script>
47+
```
48+
49+
### Input 示例
50+
51+
当用户更改输入字段的内容时执行 JavaScript：
52+
53+
```html
54+
<input type="text" name="txt" value="Hello" onchange="myFunction(this.value)">
55+
```
56+
57+
```html idoc:preview:iframe
58+
<p>
59+
修改输入字段中的文本，然后在字段外单击以触发 onchange 事件。
60+
</p>
61+
输入一些文字：<input type="text" name="txt" value="Hello" onchange="myFunction(this.value)">
62+
<p id="demo"></p>
63+
<script>
64+
function myFunction(val) {
65+
console.log('~~~')
66+
document.getElementById("demo").innerHTML = "输入值已更改。 新值是：" + val;
67+
}
68+
</script>
69+
```
70+
71+
## 浏览器支持
72+
73+
| 元素 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
74+
| --- | --- | --- | --- | --- | --- |
75+
| onchange | Yes | Yes | Yes | Yes | Yes |
76+
<!--rehype:style=width: 100%; display: inline-table;-->
77+
78+
79+
[1]: ../assets/chrome.svg
80+
[2]: ../assets/edge.svg
81+
[3]: ../assets/firefox.svg
82+
[4]: ../assets/safari.svg
83+
[5]: ../assets/opera.svg
84+

0 commit comments

Comments
 (0)