Merge branch 'main' into fix-typo-client-side-web-apis-intro-ja

9 files changed, 33 insertions, 277 deletions

diff --git a/files/zh-cn/web/api/audionode/index.html b/files/zh-cn/web/api/audionode/index.html
index ef3ae65a0e..2361eda9f8 100644
--- a/files/zh-cn/web/api/audionode/index.html
+++ b/files/zh-cn/web/api/audionode/index.html
@@ -5,7 +5,7 @@ translation_of: Web/API/AudioNode
 ---
 <div>{{ APIRef("Web Audio API") }} {{SeeCompatTable}}</div>
 
-<p><img alt="AudioNodes participating in an AudioContext create a audio routing graph." src="https://mdn.mozillademos.org/files/5081/WebAudioBasics.png" style="float: left; height: 260px; margin: 10px; width: 355px;"><strong><code>AudioNode</code></strong><strong> </strong>接口是一个处理音频的通用模块, 比如一个音频源 (e.g. 一个 HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} 元素), 一个音频地址或者一个中间处理模块 (e.g. 一个过滤器如 {{domxref("BiquadFilterNode")}}, 或一个音量控制器如 {{domxref("GainNode")}}).</p>
+<p><img alt="AudioNodes participating in an AudioContext create a audio routing graph." src="https://mdn.mozillademos.org/files/5081/WebAudioBasics.png"><strong><code>AudioNode</code></strong><strong> </strong>接口是一个处理音频的通用模块, 比如一个音频源 (e.g. 一个 HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} 元素), 一个音频地址或者一个中间处理模块 (e.g. 一个过滤器如 {{domxref("BiquadFilterNode")}}, 或一个音量控制器如 {{domxref("GainNode")}}).</p>
 
 <p><code>一个AudioNode</code> 既有输入也有输出。输入与输出都有一定数量的通道。<em>只有一个输出而没有输入的</em> <code>AudioNode</code> 叫做音频源。</p>
 
diff --git a/files/zh-cn/web/api/document/onvisibilitychange/index.html b/files/zh-cn/web/api/document/onvisibilitychange/index.html
deleted file mode 100644
index 22fb0e4db4..0000000000
--- a/files/zh-cn/web/api/document/onvisibilitychange/index.html
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: Document.onvisibilitychange
-slug: Web/API/Document/onvisibilitychange
-translation_of: Web/API/Document/onvisibilitychange
----
-<div>{{ApiRef('DOM')}}</div>
-
-<p><code><strong>Document.onvisibilitychange</strong></code> 是一个事件处理方法，它将在该对象的 <code><strong>visibilitychange</strong></code>事件被触发时调用。</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="syntaxbox"><em>obj</em>.onvisibilitychange = <em>function</em>;
-</pre>
-
-<ul>
- <li><code>function</code> 是一个用户定义的方法的名字（而非带()和任何参数的函数调用），或者匿名函数的申明。</li>
-</ul>
-
-<h2 id="例子">例子</h2>
-
-<pre class="brush: js">document.onvisibilitychange = function() {
-  console.log("Visibility of page has changed!");
-};
-</pre>
-
-<h2 id="标准">标准</h2>
-
-<table class="spectable standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Page Visibility API','#onvisiblitychange-event-handler','onvisibilitychange')}}</td>
-   <td>{{Spec2('Page Visibility API')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-
-
-<p>{{Compat("api.Document.onvisibilitychange")}}</p>
-
-<h2 id="另见">另见</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility API</a></li>
-</ul>
diff --git a/files/zh-cn/web/api/eventsource/onerror/index.html b/files/zh-cn/web/api/eventsource/error_event/index.html
index 991d194795..eb69418af9 100644
--- a/files/zh-cn/web/api/eventsource/onerror/index.html
+++ b/files/zh-cn/web/api/eventsource/error_event/index.html
@@ -1,8 +1,8 @@
 ---
 title: EventSource.onerror
-slug: Web/API/EventSource/onerror
+slug: Web/API/EventSource/error_event
 translation_of: Web/API/EventSource/onerror
-original_slug: Server-sent_events/EventSource/onerror
+original_slug: Web/API/EventSource/onerror
 ---
 <div>{{APIRef('WebSockets API')}}</div>
 
diff --git a/files/zh-cn/web/api/eventsource/onopen/index.html b/files/zh-cn/web/api/eventsource/open_event/index.html
index 20ca54d1f4..64214dbd2f 100644
--- a/files/zh-cn/web/api/eventsource/onopen/index.html
+++ b/files/zh-cn/web/api/eventsource/open_event/index.html
@@ -1,12 +1,12 @@
 ---
 title: EventSource.onopen
-slug: Web/API/EventSource/onopen
+slug: Web/API/EventSource/open_event
 tags:
   - API
   - Event Handler
   - EventSource
 translation_of: Web/API/EventSource/onopen
-original_slug: Server-sent_events/EventSource/onopen
+original_slug: Web/API/EventSource/onopen
 ---
 <div>{{APIRef('WebSockets API')}}</div>
 
diff --git a/files/zh-cn/web/api/mediadevices/ondevicechange/index.html b/files/zh-cn/web/api/mediadevices/ondevicechange/index.html
deleted file mode 100644
index 1bf012abf9..0000000000
--- a/files/zh-cn/web/api/mediadevices/ondevicechange/index.html
+++ /dev/null
@@ -1,202 +0,0 @@
----
-title: MediaDevices.ondevicechange
-slug: Web/API/MediaDevices/ondevicechange
-translation_of: Web/API/MediaDevices/ondevicechange
----
-<p>{{APIRef("Media Capture and Streams")}}</p>
-
-<p><span class="seoSummary"> <strong><code>MediaDevices.ondevicechange</code></strong> 属性是一种{{event("Event_handlers", "event handler")}}，当{{domxref("MediaDevices")}} 接口的{{event("devicechange")}}事件被触发时会被调用. 不论{{Glossary("user agent")}}媒体设备的设置是否可用, 或者网站或者应用发生变了都会触发。无论何时你都可以使用 {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}  去更新可用设备列表.</span></p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="syntaxbox"><em>MediaDevices</em>.ondevicechange = <em>eventHandler</em>;
-</pre>
-
-<h3 id="Value">Value</h3>
-
-<p>A function you provide which accepts as input a {{domxref("Event")}} object describing the {{domxref("devicehange")}} event that occurred. There is no information about the change included in the event object; to get the updated list of devices, you'll have to use {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}.</p>
-
-<h2 id="Example" name="Example">Example</h2>
-
-<p>In this example, we create a function called <code>updateDeviceList()</code>, which is called once when {{domxref("MediaDevices.getUserMedia()")}} successfully obtains a stream, and then is called any time the device list changes. It displays in the browser window two lists: one of audio devices and one of video devices, with both the device's label (name) and whether it's an input or an output device. Because the example provides a handler for the {{event("devicechange")}} event, the list is refreshed any time a media device is attached to or removed from the device running the sample.</p>
-
-<div class="hidden">
-<h3 id="HTML_content">HTML content</h3>
-
-<pre class="brush: html">&lt;p&gt;Click the start button below to begin the demonstration.&lt;/p&gt;
-&lt;div id="startButton" class="button"&gt;
-  Start
-&lt;/div&gt;
-&lt;video id="video" width="160" height="120" autoplay&gt;&lt;/video&gt;&lt;br&gt;
-
-&lt;div class="left"&gt;
-  &lt;h2&gt;Audio devices:&lt;/h2&gt;
-  &lt;ul class="deviceList" id="audioList"&gt;&lt;/ul&gt;
-&lt;/div&gt;
-&lt;div class="right"&gt;
-  &lt;h2&gt;Video devices:&lt;/h2&gt;
-  &lt;ul class="deviceList" id="videoList"&gt;&lt;/ul&gt;
-&lt;/div&gt;
-
-&lt;div id="log"&gt;&lt;/div&gt;</pre>
-
-<h3 id="CSS_content">CSS content</h3>
-
-<pre class="brush: css">body {
-  font: 14px "Open Sans", "Arial", sans-serif;
-}
-
-video {
-  margin-top: 20px;
-  border: 1px solid black;
-}
-
-.button {
-  cursor: pointer;
-  width: 160px;
-  border: 1px solid black;
-  font-size: 16px;
-  text-align: center;
-  padding-top: 2px;
-  padding-bottom: 4px;
-  color: white;
-  background-color: darkgreen;
-}
-
-h2 {
-  margin-bottom: 4px;
-}
-
-.left {
-  float:left;
-  width: 48%;
-  margin-right: 2%
-}
-
-.right {
-  float:right;
-  width: 48%;
-  margin-left: 2%
-}
-
-.deviceList {
-  border: 1px solid black;
-  list-style-type: none;
-  margin-top: 2px;
-  padding: 6px;
-}</pre>
-
-<h3 id="JavaScript_content">JavaScript content</h3>
-
-<h4 id="Other_code">Other code</h4>
-
-<p>Below is other code which, while needed to make this example work, isn'tt related directly to <code>ondevicechange</code>, so we won't go into any detail.</p>
-
-<pre class="brush: js">let videoElement = document.getElementById("video");
-let logElement = document.getElementById("log");
-
-function log(msg) {
-  logElement.innerHTML += msg + "&lt;br&gt;";
-}
-
-document.getElementById("startButton").addEventListener("click", function() {
-  navigator.mediaDevices.getUserMedia({
-    video: {
-      width: 160,
-      height: 120,
-      frameRate: 30
-    },
-    audio: {
-      sampleRate: 44100,
-      sampleSize: 16,
-      volume: 0.25
-    }
-  }).then(stream =&gt; {
-      videoElement.srcObject = stream;
-      updateDeviceList();
-    })
-    .catch(err =&gt; log(err.name + ": " + err.message));
-}, false);</pre>
-</div>
-
-<p>We set up global variables that contain references to the {{HTMLElement("ul")}} elements that are used to list the audio and video devices:</p>
-
-<pre class="brush: js">let audioList = document.getElementById("audioList");
-let videoList = document.getElementById("videoList");</pre>
-
-<h4 id="Getting_and_drawing_the_device_list">Getting and drawing the device list</h4>
-
-<p>Now let's take a look at <code>updateDeviceList()</code> itself. This method is called any time we want to fetch the current list of media devices and then update the displayed lists of audo and video devices using that information.</p>
-
-<pre class="brush: js">function updateDeviceList() {
-  navigator.mediaDevices.enumerateDevices()
-  .then(function(devices) {
-    audioList.innerHTML = "";
-    videoList.innerHTML = "";
-
-    devices.forEach(function(device) {
-      let elem = document.createElement("li");
-      let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);
-
-      elem.innerHTML = "&lt;strong&gt;" + device.label + "&lt;/strong&gt; (" + direction + ")";
-      if (type === "audio") {
-        audioList.appendChild(elem);
-      } else if (type === "video") {
-        videoList.appendChild(elem);
-      }
-    });
-  });
-}</pre>
-
-<p><code>updateDeviceList()</code> consists entirely of a call to the function {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}} on the {{domxref("MediaDevices")}} object referenced in the {{domxref("navigator.mediaDevices")}} property, as well as the code that's run when the {{jsxref("promise")}} returned by <code>enumerateDevices()</code> is fulfilled. The fulfillment handler is called when the device list is ready. The list is passed into the fulfillment handler as an array of {{domxref("MediaDeviceInfo")}} objects, each describing one media input or output device.</p>
-
-<p>A {{jsxref("Array.forEach", "forEach()")}} loop is used to scan through all the devices. For each device, we create a new {{HTMLElement("li")}} object to be used to display it to the user.</p>
-
-<p>The line <code>let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);</code> deserves special notice. This uses <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructuring assignment</a> (a new feature of <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 6</a>) to assign the values of the first three items in the array returned by {{jsxref("String.match()")}} to the variables <code>kind</code>, <code>type</code>, and <code>direction</code>. We do this because the value of {{domxref("MediaDeviceInfo.kind")}} is a single string that includes both the media type and the direction the media flows, such as "audioinput" or "videooutput". This line, then, pulls out the type ("audio" or "video") and direction ("input" or "output") so they can be used to construct the string displayed in the list.</p>
-
-<p>Once the string is assembled, containing the device's name in bold and the direction in parentheses, it's appended to the appropriate list by calling {{domxref("Node.appendChild", "appendChild()")}} on either <code>audioList</code> or <code>videoList</code>, as appropriate based on the device type.</p>
-
-<h4 id="Handling_device_list_changes">Handling device list changes</h4>
-
-<p>We call <code>updateDeviceList()</code> in two places. The first is in the {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} promise's fulfillment handler, to initially fill out the list when the stream is opened. The second is in the event handler for {{event("devicechange")}}:</p>
-
-<pre class="brush: js">navigator.mediaDevices.ondevicechange = function(event) {
-  updateDeviceList();
-}</pre>
-
-<p>With this code in place, each time the user plugs in a camera, microphone, or other media device, or turns one on or off, we call <code>updateDeviceList()</code> to redraw the list of connected devices.</p>
-
-<h3 id="Result">Result</h3>
-
-<p>{{ EmbedLiveSample('Example', 600, 460) }}</p>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('Media Capture', '#dom-mediadevices-ondevicechange', 'ondevicechange') }}</td>
-   <td>{{ Spec2('Media Capture') }}</td>
-   <td>Initial specification.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-{{Compat("api.MediaDevices.ondevicechange")}}
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>The {{event("devicechange")}} event and its type, {{domxref("Event")}}.</li>
- <li>{{domxref("MediaDevices.enumerateDevices()")}}</li>
- <li>{{domxref("MediaDeviceInfo")}}</li>
-</ul>
diff --git a/files/zh-cn/web/api/performance/onresourcetimingbufferfull/index.html b/files/zh-cn/web/api/performance/resourcetimingbufferfull_event/index.html
index 7e26cf4793..0b5890b069 100644
--- a/files/zh-cn/web/api/performance/onresourcetimingbufferfull/index.html
+++ b/files/zh-cn/web/api/performance/resourcetimingbufferfull_event/index.html
@@ -1,7 +1,8 @@
 ---
 title: Performance.onresourcetimingbufferfull
-slug: Web/API/Performance/onresourcetimingbufferfull
+slug: Web/API/Performance/resourcetimingbufferfull_event
 translation_of: Web/API/Performance/onresourcetimingbufferfull
+original_slug: Web/API/Performance/onresourcetimingbufferfull
 ---
 <div>{{APIRef("Resource Timing API")}}</div>
 
diff --git a/files/zh-cn/web/api/window/onappinstalled/index.html b/files/zh-cn/web/api/window/appinstalled_event/index.html
index 21662ca3f6..f5f098c903 100644
--- a/files/zh-cn/web/api/window/onappinstalled/index.html
+++ b/files/zh-cn/web/api/window/appinstalled_event/index.html
@@ -1,7 +1,8 @@
 ---
 title: Window.onappinstalled
-slug: Web/API/Window/onappinstalled
+slug: Web/API/Window/appinstalled_event
 translation_of: Web/API/Window/onappinstalled
+original_slug: Web/API/Window/onappinstalled
 ---
 <div>{{APIRef}}</div>
 
diff --git a/files/zh-cn/web/api/window/onbeforeinstallprompt/index.html b/files/zh-cn/web/api/window/beforeinstallprompt_event/index.html
index 9fe0053476..b9f089174d 100644
--- a/files/zh-cn/web/api/window/onbeforeinstallprompt/index.html
+++ b/files/zh-cn/web/api/window/beforeinstallprompt_event/index.html
@@ -1,10 +1,11 @@
 ---
 title: Window.onbeforeinstallprompt
-slug: Web/API/Window/onbeforeinstallprompt
+slug: Web/API/Window/beforeinstallprompt_event
 tags:
   - Window.onbeforeinstallprompt
   - beforeinstallprompt
 translation_of: Web/API/Window/onbeforeinstallprompt
+original_slug: Web/API/Window/onbeforeinstallprompt
 ---
 <p>{{ ApiRef() }}</p>
 
diff --git a/files/zh-cn/web/api/window/storage_event/index.html b/files/zh-cn/web/api/window/storage_event/index.html
index 81d66d57bc..7a9c471636 100644
--- a/files/zh-cn/web/api/window/storage_event/index.html
+++ b/files/zh-cn/web/api/window/storage_event/index.html
@@ -10,20 +10,28 @@ translation_of: Web/API/Window/storage_event
 
 <h2 id="常规信息">常规信息</h2>
 
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">说明</dt>
- <dd style="margin: 0 0 0 120px;"><em><a class="external" href="http://www.w3.org/TR/webstorage/#the-storage-event">Web Storage</a></em></dd>
- <dt style="float: left; text-align: right; width: 120px;">接口</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("StorageEvent")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt>
- <dd style="margin: 0 0 0 120px;">No</dd>
- <dt style="float: left; text-align: right; width: 120px;">默认行为可取消</dt>
- <dd style="margin: 0 0 0 120px;">No</dd>
- <dt style="float: left; text-align: right; width: 120px;">目标</dt>
- <dd style="margin: 0 0 0 120px;">DefaultView (<code>&lt;window&gt;</code>)</dd>
- <dt style="float: left; text-align: right; width: 120px;">默认行为</dt>
- <dd style="margin: 0 0 0 120px;">无</dd>
-</dl>
+<p>说明: <em><a class="external" href="http://www.w3.org/TR/webstorage/#the-storage-event">Web Storage</a></em></p>
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">接口</th>
+      <td>{{domxref("StorageEvent")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">是否冒泡</th>
+      <td>No</td>
+    </tr>
+    <tr>
+      <th scope="row">目标</th>
+      <td>DefaultView (<code>&lt;window&gt;</code>)</td>
+    </tr>
+    <tr>
+      <th scope="row">默认行为</th>
+      <td>无</td>
+    </tr>
+  </tbody>
+</table>
 
 <h2 id="属性">属性</h2>