doc: add oncanplaythrough/onchange document.

jaywcjlove · Jun 26, 2022 · 6db9598 · 6db9598
1 parent 88d721e
commit 6db9598
Show file tree

Hide file tree

Showing 3 changed files with 166 additions and 10 deletions.
diff --git a/.idoc/.filesStat.json b/.idoc/.filesStat.json
@@ -3630,15 +3630,15 @@
     "birthtime": "2022-05-29T10:18:16.994Z"
   },
   "docs/attribute/oncanplaythrough.md": {
-    "atime": "2022-04-29T15:27:16.649Z",
-    "mtime": "2022-04-29T15:26:49.651Z",
-    "ctime": "2022-04-29T15:26:49.651Z",
+    "atime": "2022-06-26T03:44:36.674Z",
+    "mtime": "2022-06-26T03:44:37.180Z",
+    "ctime": "2022-06-26T03:44:37.180Z",
     "birthtime": "2022-04-24T09:54:54.966Z"
   },
   "docs/attribute/onchange.md": {
-    "atime": "2022-04-29T15:27:17.129Z",
-    "mtime": "2022-04-29T15:26:49.653Z",
-    "ctime": "2022-04-29T15:26:49.653Z",
+    "atime": "2022-06-26T04:01:09.500Z",
+    "mtime": "2022-06-26T04:01:09.714Z",
+    "ctime": "2022-06-26T04:01:09.714Z",
     "birthtime": "2022-04-24T09:54:54.966Z"
   },
   "docs/attribute/onclick.md": {

diff --git a/docs/attribute/oncanplaythrough.md b/docs/attribute/oncanplaythrough.md
@@ -1,4 +1,80 @@
-oncanplaythrough.md
+HTML oncanplaythrough  属性
 ===
 
-欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/attribute/oncanplaythrough.md">docs/attribute/oncanplaythrough.md</a> 文件，共建 HTML Tutorial 文档。
+## 定义和用法
+
+`oncanplaythrough` 事件发生在浏览器估计它可以播放指定的 audio/video 而无需停止缓冲时。
+
+## 适用于
+
+`oncanplaythrough` 属性是 [事件属性](../reference/eventattributes.md) 的一部分，可用于以下元素：
+
+| 元素 | 事件 |
+| --- | --- |
+| [\<audio>](../tags/audio.md) | [canplaythrough](../reference/av/event/canplaythrough.md) |
+| [\<video>](../tags/video.md) | [canplaythrough](../reference/av/event/canplaythrough.md) |
+<!--rehype:style=width: 100%; display: inline-table;-->
+
+## 示例
+
+### Audio 示例
+
+当音频准备好开始播放时运行 `myFunction`：
+
+```html
+<audio oncanplaythrough="myFunction()">
+```
+
+
+```html idoc:preview:iframe
+<script>
+  function myFunction() {
+    alert("可以开始播放音频");
+  }
+</script> 
+<audio controls oncanplaythrough="myFunction()">
+  <source type="audio/ogg" src="horse.ogg">
+  <source src="../assets/horse.ogg" type="audio/ogg">
+  <source src="../assets/horse.mp3" type="audio/mpeg">
+  您的浏览器不支持音频标签。
+</audio>
+```
+
+
+### Video 示例
+
+当视频准备好开始播放时运行 `myFunction`：
+
+```html
+<video oncanplaythrough="myFunction()">
+```
+
+```html idoc:preview:iframe
+<script>
+  function myFunction() {
+    alert("可以开始播放视频了");
+  }
+</script> 
+<video width="320" controls oncanplaythrough="myFunction()">
+  <source type="video/mp4" src="../assets/mov_bbb.mp4">
+  <source type="video/ogm" src="../assets/mov_bbb.ogm">
+  您的浏览器不支持 video 标签。
+</video>
+```
+
+## 浏览器支持
+
+`oncanplaythrough` 属性对每个元素都有以下浏览器支持：
+
+| 元素 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
+| --- | --- | --- | --- | --- | --- |
+| audio   | Yes | 9.0 | Yes | Yes | Yes |
+| video   | Yes | 9.0 | Yes | Yes | Yes |
+<!--rehype:style=width: 100%; display: inline-table;-->
+
+
+[1]: ../assets/chrome.svg
+[2]: ../assets/edge.svg
+[3]: ../assets/firefox.svg
+[4]: ../assets/safari.svg
+[5]: ../assets/opera.svg
diff --git a/docs/attribute/onchange.md b/docs/attribute/onchange.md
@@ -1,4 +1,84 @@
-onchange.md
+HTML onchange 属性
 ===
 
-欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/attribute/onchange.md">docs/attribute/onchange.md</a> 文件，共建 HTML Tutorial 文档。
+## 定义和用法
+
+`onchange` 属性会在元素的值发生更改时触发。
+
+**提示：** 此事件类似于 `oninput` 事件。 不同之处在于，`oninput` 事件会在元素的值发生更改后立即发生，而 `onchange` 会在元素失去焦点时发生。 另一个区别是 `onchange` 事件也适用于 `<select>` 元素。
+
+## 适用于
+
+`onchange` 属性是 [事件属性](../reference/attributes.md) 的一部分，可用于任何 HTML 元素。
+
+| 元素 | 事件 |
+| --- | --- |
+| 所有 HTML 元素 | [onchange](../events/onchange.md) |
+<!--rehype:style=width: 100%; display: inline-table;-->
+
+## 示例
+
+### Select 示例
+
+当用户更改 \<select> 元素的选定选项时执行 JavaScript：
+
+
+```html
+<select onchange="myFunction()">
+```
+
+```html idoc:preview:iframe
+<select id="mySelect" onchange="myFunction()">
+  <option value="Audi">Audi
+  <option value="BMW">BMW
+  <option value="Mercedes">Mercedes
+  <option value="Volvo">Volvo
+</select>
+<p>
+  当您选择一辆新车时，会触发一个函数，该函数会输出所选汽车的值。
+</p>
+<p id="demo"></p>
+<script>
+function myFunction() {
+  var x = document.getElementById("mySelect").value;
+  document.getElementById("demo").innerHTML = "You selected: " + x;
+}
+</script>
+```
+
+### Input 示例
+
+当用户更改输入字段的内容时执行 JavaScript：
+
+```html
+<input type="text" name="txt" value="Hello" onchange="myFunction(this.value)">
+```
+
+```html idoc:preview:iframe
+<p>
+  修改输入字段中的文本，然后在字段外单击以触发 onchange 事件。
+</p>
+输入一些文字：<input type="text" name="txt" value="Hello" onchange="myFunction(this.value)">
+<p id="demo"></p>
+<script>
+function myFunction(val) {
+  console.log('~~~')
+  document.getElementById("demo").innerHTML = "输入值已更改。 新值是：" + val;
+}
+</script>
+```
+
+## 浏览器支持
+
+| 元素 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
+| --- | --- | --- | --- | --- | --- |
+| onchange        | Yes | Yes | Yes | Yes | Yes |
+<!--rehype:style=width: 100%; display: inline-table;-->
+
+
+[1]: ../assets/chrome.svg
+[2]: ../assets/edge.svg
+[3]: ../assets/firefox.svg
+[4]: ../assets/safari.svg
+[5]: ../assets/opera.svg
+