[zh-CN]: sync translation for Fullscreen API events

files/zh-cn/web/api/document/fullscreenchange_event/index.md

@@ -1,11 +1,13 @@
 ---
 title: Document：fullscreenchange 事件
 slug: Web/API/Document/fullscreenchange_event
+l10n:
+  sourceCommit: 8a12b2889c9dbcb7d9ed026cac3a8538ec5cb277
 ---
 
-{{APIRef}}
+{{APIRef("Fullscreen API")}}
 
-`fullscreenchange` 事件会在浏览器进入或退出全屏模式后立即触发。
+**`fullscreenchange`** 事件会在浏览器进入或退出全屏模式后立即触发。
 
 该事件被发送到正在进入或退出全屏模式的 `Element`，并且此事件会向上冒泡到 `Document` 对象。
 
@@ -15,7 +17,7 @@ slug: Web/API/Document/fullscreenchange_event
 
 ## 语法
 
-在诸如 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 之类的方法中使用事件名称，或设置事件处理程序属性。
+在类似于 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 之类的方法中使用事件名称，或设置事件处理器属性。
 
 ```js
 addEventListener("fullscreenchange", (event) => {});
@@ -29,52 +31,77 @@ onfullscreenchange = (event) => {};
 
 ## 示例
 
-在此示例中，向 {{domxref("Document")}} 添加了 `fullscreenchange` 事件处理程序。
+### 打印 `fullscreenchange` 事件
 
-如果用户单击“切换全屏模式”按钮，`click` 处理程序将切换 `div` 的全屏模式。如果 `document.fullscreenElement` 具有值，则会退出全屏模式。否则，div 将被置于全屏模式。
+在此示例中，向 {{domxref("Document")}} 添加了 `fullscreenchange` 事件处理器。
+
+如果用户单击“切换全屏模式”按钮，`click` 处理器将切换 `div` 的全屏模式。如果 `document.fullscreenElement` 具有值，则会退出全屏模式。否则，div 将被置于全屏模式。
 
 请记住，在处理 `fullscreenchange` 事件时，元素的状态已经发生了变化。因此，如果更改是为了全屏模式，`document.fullscreenElement` 将指向现在处于全屏模式的元素。另一方面，如果 `document.fullscreenElement` 为 `null`，则全屏模式已被取消。
 
-对于示例代码，这意味着，如果元素当前处于全屏模式，则 `fullscreenchange` 处理程序将将全屏元素的 `id` 记录在控制台中。如果 `document.fullscreenElement` 为 `null`，则代码记录消息表示更改是为了退出全屏模式。
+对于示例代码，这意味着，如果元素当前处于全屏模式，则 `fullscreenchange` 处理器在控制台中打印全屏元素的 `id`。如果 `document.fullscreenElement` 为 `null`，则代码记录消息表示更改是为了退出全屏模式。
 
 ### HTML
 
 ```html
 <h1>fullscreenchange 事件示例</h1>
 <div id="fullscreen-div">
   <button id="toggle-fullscreen">切换全屏模式</button>
+  <pre id="logger"></pre>
 </div>
 ```
 
+#### CSS
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+#fullscreen-div {
+  height: 150px;
+  padding: 1rem;
+  background-color: pink;
+}
+
+#logger {
+  height: 80px;
+  padding: 0 0.5rem;
+  background-color: white;
+  overflow: scroll;
+}
+```
+
 ### JavaScript
 
 ```js
+const logger = document.querySelector("#logger");
+const fullScreenElement = document.querySelector("#fullscreen-div");
+
+function log(message) {
+  logger.textContent = `${logger.textContent}\n${message}`;
+}
+
 function fullscreenchanged(event) {
   // 如果有元素处于全屏模式，则 document.fullscreenElement 将指向该元素。如果没有元素处于全屏模式，则该属性的值为 null。
   if (document.fullscreenElement) {
-    console.log(
-      `Element: ${document.fullscreenElement.id} entered fullscreen mode.`,
-    );
+    log(`元素：${document.fullscreenElement.id} 进入全屏模式。`);
   } else {
-    console.log("Leaving fullscreen mode.");
+    log("退出全屏模式。");
   }
 }
 
 document.addEventListener("fullscreenchange", fullscreenchanged);
-// 或
-document.onfullscreenchange = fullscreenchanged;
-
-// 在 toggle 按钮被点击时，将会进入或退出全屏模式
-document
-  .getElementById("toggle-fullscreen")
-  .addEventListener("click", (event) => {
-    if (document.fullscreenElement) {
-      // exitFullscreen 方法只能在 Document 对象上使用。
-      document.exitFullscreen();
-    } else {
-      el.requestFullscreen();
-    }
-  });
+
+// 在切换按钮被点击时，将会进入或退出全屏模式
+document.getElementById("toggle-fullscreen").addEventListener("click", () => {
+  if (document.fullscreenElement) {
+    // exitFullscreen 方法只能在 Document 对象上使用。
+    document.exitFullscreen();
+  } else {
+    fullScreenElement.requestFullscreen();
+  }
+});
 ```
 
 ## 规范
@@ -89,5 +116,5 @@ document
 
 - {{domxref("Document/fullscreenerror_event", "fullscreenerror")}}
 - {{domxref("Element")}}：{{domxref("Element/fullscreenchange_event", "fullscreenchange")}} 事件
-- [Fullscreen API](/zh-CN/docs/Web/API/Fullscreen_API)
-- [Fullscreen API 指南](/zh-CN/docs/Web/API/Fullscreen_API/Guide)
+- [全屏 API](/zh-CN/docs/Web/API/Fullscreen_API)
+- [全屏 API 指南](/zh-CN/docs/Web/API/Fullscreen_API/Guide)

files/zh-cn/web/api/document/fullscreenerror_event/index.md

@@ -2,12 +2,12 @@
 title: Document：fullscreenerror 事件
 slug: Web/API/Document/fullscreenerror_event
 l10n:
-  sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
+  sourceCommit: 8a12b2889c9dbcb7d9ed026cac3a8538ec5cb277
 ---
 
-{{ApiRef}}
+{{APIRef("Fullscreen API")}}
 
-当浏览器不能切换至全屏模式时，会触发 `fullscreenerror` 事件。
+**`fullscreenerror`** 事件在浏览器不能切换全屏模式时触发。
 
 与 [`fullscreenchange` 事件](/zh-CN/docs/Web/API/Document/fullscreenchange_event)一样，会触发两个 `fullscreenerror` 事件；第一个事件会发送给未能更改模式的 {{domxref("Element")}}，第二个事件会发送给拥有该元素的 {{domxref("Document")}}。
 

files/zh-cn/web/api/element/fullscreenchange_event/index.md

@@ -1,53 +1,82 @@
 ---
-title: Element.onfullscreenchange
+title: Element：fullscreenchange 事件
 slug: Web/API/Element/fullscreenchange_event
+l10n:
+  sourceCommit: 8a12b2889c9dbcb7d9ed026cac3a8538ec5cb277
 ---
 
-{{APIRef}}
+{{APIRef("Fullscreen API")}}
 
-元素接口的 **`onfullscreenchange`** 属性是在元素过渡到或过渡到全屏模式时触发的全屏更改事件的事件处理程序。
+**`fullscreenchange`** 事件会在浏览器进入或退出全屏模式后立即触发。
+
+该事件被发送到正在进入或退出全屏模式的 `Element`。
+
+要确定 `Element` 是进入还是退出全屏模式，请检查 {{domxref("Document.fullscreenElement")}} 的值：如果此值为 `null`，则表示该元素正在退出全屏模式，否则表示该元素正在进入全屏模式。
+
+此事件不能被取消。
 
 ## 语法
 
-```plain
-targetDocument.onfullscreenchange = fullscreenChangeHandler;
+在类似于 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 之类的方法中使用事件名称，或设置事件处理器属性。
+
+```js
+addEventListener("fullscreenchange", (event) => {});
+
+onfullscreenchange = (event) => {};
 ```
 
-### 值
+## 事件类型
+
+通用的 {{domxref("Event")}} 类型
 
-当事件处理程序处于 `fullscreenchange` 模式的时候，表明游戏元素被改变了或者是退出了全屏模式
+## 示例
 
-## Example
+在此示例中，向 ID 为 `fullscreen-div` 的元素添加了 `fullscreenchange` 事件处理器。
 
-本示例建立一个`fullscreenchange` 处理程序，`handleFullscreenChange ()`。此函数通过检查 [`event.target`](/zh-CN/docs/Web/API/Event/target) 的值来确定调用它的元素，然后将文档的[`fullscreenElement`](/zh-CN/docs/Web/API/Document/fullscreenElement) 值与元素进行比较，以查看它们是否为同一节点。
+如果用户单击“切换全屏模式”按钮，`click` 处理器将切换 `div` 的全屏模式。如果 `document.fullscreenElement` 具有值，则会退出全屏模式。否则，div 将被置于全屏模式。
 
-这给了我们一个值，即 `isFullscreen`, 我们将其传递到一个名为 `adjustMyControls()` 的函数，我们想象它是一个函数，可以对应用的用户界面进行调整，以便在全屏模式下而不是在窗口。
+请记住，在处理 `fullscreenchange` 事件时，元素的状态已经发生了变化。因此，如果更改是为了全屏模式，`document.fullscreenElement` 将指向现在处于全屏模式的元素。另一方面，如果 `document.fullscreenElement` 为 `null`，则全屏模式已被取消。
+
+对于示例代码，这意味着，如果元素当前处于全屏模式，则 `fullscreenchange` 处理器在控制台中打印全屏元素的 `id`。如果 `document.fullscreenElement` 为 `null`，则代码记录消息表示更改是为了退出全屏模式。
+
+### HTML
+
+```html
+<h1>fullscreenchange 事件示例</h1>
+<div id="fullscreen-div">
+  <button id="toggle-fullscreen">切换全屏模式</button>
+</div>
+```
+
+### JavaScript
 
 ```js
-function toggleFullscreen() {
-  let elem = document.querySelector("video");
-
-  elem.onfullscreenchange = handleFullscreenChange;
-  if (!document.fullscreenElement) {
-    elem
-      .requestFullscreen()
-      .then({})
-      .catch((err) => {
-        alert(
-          `Error attempting to enable full-screen mode: ${err.message} (${err.name})`,
-        );
-      });
+function fullscreenchanged(event) {
+  // 如果有元素处于全屏模式，则 document.fullscreenElement 将指向该元素。如果没有元素处于全屏模式，则该属性的值为 null。
+  if (document.fullscreenElement) {
+    console.log(`元素：${document.fullscreenElement.id} 进入全屏模式。`);
   } else {
-    document.exitFullscreen();
+    console.log("退出全屏模式。");
   }
 }
 
-function handleFullscreenChange(event) {
-  let elem = event.target;
-  let isFullscreen = document.fullscreenElement === elem;
-
-  adjustMyControls(isFullscreen);
-}
+const el = document.getElementById("fullscreen-div");
+
+el.addEventListener("fullscreenchange", fullscreenchanged);
+// 或
+el.onfullscreenchange = fullscreenchanged;
+
+// 在切换按钮被点击时，将会进入或退出全屏模式
+document
+  .getElementById("toggle-fullscreen")
+  .addEventListener("click", (event) => {
+    if (document.fullscreenElement) {
+      // exitFullscreen 方法只能在 Document 对象上使用。
+      document.exitFullscreen();
+    } else {
+      el.requestFullscreen();
+    }
+  });
 ```
 
 ## 规范
@@ -60,8 +89,7 @@ function handleFullscreenChange(event) {
 
 ## 参见
 
-- [Fullscreen API](/zh-CN/docs/Web/API/Fullscreen_API)
-- [Guide to the Fullscreen API](/zh-CN/docs/Web/API/Fullscreen_API/Guide)
-- [`fullscreenchange`](/zh-CN/docs/Web/Events/fullscreenchange)
-- [`Element.onfullscreenerror`](/zh-CN/docs/Web/API/Element/onfullscreenerror)
-- The [`Document`](/zh-CN/docs/Web/API/Document) equivalent: [`onfullscreenchange`](/zh-CN/docs/Web/API/Document/onfullscreenchange).
+- [Document：fullscreenchange 事件](/zh-CN/docs/Web/API/Document/fullscreenchange_event)
+- [Element：fullscreenerror 事件](/zh-CN/docs/Web/API/Element/fullscreenerror_event)
+- [全屏 API](/zh-CN/docs/Web/API/Fullscreen_API)
+- [全屏 API 指南](/zh-CN/docs/Web/API/Fullscreen_API/Guide)

files/zh-cn/web/api/element/fullscreenerror_event/index.md

@@ -1,36 +1,49 @@
 ---
-title: Element.onfullscreenerror
+title: Element：fullscreenerror 事件
 slug: Web/API/Element/fullscreenerror_event
+l10n:
+  sourceCommit: 8a12b2889c9dbcb7d9ed026cac3a8538ec5cb277
 ---
 
-{{ApiRef("Fullscreen API")}}
+{{APIRef("Fullscreen API")}}
 
-{{domxref("Element")}} 接口的 **`onfullscreenerror`** 属性是在{{domxref("Element")}} 过渡到或退出全屏模式发生错误后处理事件[`fullscreenerror`](/zh-CN/docs/Web/API/Document/fullscreenerror_event)的事件处理程序。
+**`fullscreenerror`** 事件在浏览器不能切换全屏模式时触发。
+
+与 [`fullscreenchange` 事件](/zh-CN/docs/Web/API/Element/fullscreenchange_event)一样，会触发两个 `fullscreenerror` 事件；第一个事件会发送给未能更改模式的 {{domxref("Element")}}，第二个事件会发送给拥有该元素的 {{domxref("Document")}}。
+
+有关切换到全屏模式可能失败的原因，请参阅[全屏 API 指南](/zh-CN/docs/Web/API/Fullscreen_API/Guide)。
+
+该事件不可取消。
 
 ## 语法
 
-```plain
-targetElement.onfullscreenerror = fullscreenErrorHandler;
+在类似于 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 的方法中使用事件名称，或设置事件处理器属性。
+
+```js
+addEventListener("fullscreenchange", (event) => {});
+
+onfullscreenchange = (event) => {};
 ```
 
-### 值
+## 事件类型
 
-一个处理事件[`fullscreenerror`](/zh-CN/docs/Web/API/Document/fullscreenerror_event)的事件处理程序。
+通用的 {{domxref("Event")}}。
 
 ## 示例
 
-本示例尝试不从用户发起的事件 (如点击事件[`click`](/zh-CN/docs/Web/API/Element/click_event)或键盘事件[`keypress`](/zh-CN/docs/Web/API/Element/keypress_event)) 处理程序来触发全屏，由于全屏模式只允许由用户主动输入触发，因此该操作会发生错误，从而导致{{domxref("Element")}}会触发[`fullscreenerror`](/zh-CN/docs/Web/API/Document/fullscreenerror_event)事件传递给错误处理程序
-
 ```js
-let elem = document.querySelector("video")}}
+const requestor = document.querySelector("div");
 
-elem.onfullscreenerror = function ( event ) {
-  displayWarning("Unable to switch into full-screen mode.");
-};
+function handleError(event) {
+  console.error("切换至全屏模式时发生错误");
+  console.log(event);
+}
 
-//....
+requestor.addEventListener("fullscreenerror", handleError);
+// 或
+requestor.onfullscreenerror = handleError;
 
-elem.requestFullscreen();
+requestor.requestFullscreen();
 ```
 
 ## 规范
@@ -43,8 +56,6 @@ elem.requestFullscreen();
 
 ## 参见
 
-- [Fullscreen API](/zh-CN/docs/Web/API/Fullscreen_API)
-- [Guide to the Fullscreen API](/zh-CN/docs/Web/API/Fullscreen_API/Guide)
-- [`fullscreenerror`](/zh-CN/docs/Web/API/Document/fullscreenerror_event)
-- {{domxref("Element.onfullscreenchange")}}
-- {{domxref("Document.onfullscreenerror")}}
+- [`fullscreenchange`](/zh-CN/docs/Web/API/Element/fullscreenchange_event)
+- [全屏 API](/zh-CN/docs/Web/API/Fullscreen_API)
+- [全屏 API 使用指南](/zh-CN/docs/Web/API/Fullscreen_API/Guide)