Adapt Element fullscreen events to new structure (#12931)

files/en-us/_redirects.txt

@@ -7722,6 +7722,8 @@
 /en-US/docs/Web/API/Element/mozRequestFullScreen	/en-US/docs/Web/API/Element/requestFullScreen
 /en-US/docs/Web/API/Element/msMatchesSelector	/en-US/docs/Web/API/Element/matches
 /en-US/docs/Web/API/Element/name	/en-US/docs/Web/API
+/en-US/docs/Web/API/Element/onfullscreenchange	/en-US/docs/Web/API/Element/fullscreenchange_event
+/en-US/docs/Web/API/Element/onfullscreenerror	/en-US/docs/Web/API/Element/fullscreenerror_event
 /en-US/docs/Web/API/Element/ongotpointercapture	/en-US/docs/Web/API/GlobalEventHandlers/ongotpointercapture
 /en-US/docs/Web/API/Element/onlostpointercapture	/en-US/docs/Web/API/GlobalEventHandlers/onlostpointercapture
 /en-US/docs/Web/API/Element/onwheel	/en-US/docs/Web/API/GlobalEventHandlers/onwheel

files/en-us/_wikihistory.json

@@ -41889,21 +41889,6 @@
       "Jürgen Jeka"
     ]
   },
-  "Web/API/Element/onfullscreenchange": {
-    "modified": "2020-12-09T19:54:49.597Z",
-    "contributors": [
-      "bershanskiy",
-      "Sheppy"
-    ]
-  },
-  "Web/API/Element/onfullscreenerror": {
-    "modified": "2020-11-21T07:55:24.257Z",
-    "contributors": [
-      "sideshowbarker",
-      "mfuji09",
-      "Sheppy"
-    ]
-  },
   "Web/API/Element/openOrClosedShadowRoot": {
     "modified": "2020-10-15T22:08:25.724Z",
     "contributors": [

files/en-us/web/api/document/fullscreenchange_event/index.md

@@ -24,6 +24,23 @@ This event is not cancelable.
 
 In this example, a handler for the `fullscreenchange` event is added to the {{domxref("Document")}}.
 
+If the user clicks on the "Toggle Fullscreen Mode" button, the `click` handler will toggle fullscreen mode for the `div`. If `document.fullscreenElement` has a value it will exit fullscreen mode. If not, the div will be placed into fullscreen mode.
+
+Remember that by the time the `fullscreenchange` event is handled, the status of the element has already changed. So if the change is to fullscreen mode, `document.fullscreenElement` will point to the element that is now in fullscreen mode. On the other hand, if `document.fullscreenElement` is null, fullscreen mode has been canceled.
+
+What that means to the example code is that, if an element is currently in fullscreen mode, the `fullscreenchange` handler logs the `id` of the fullscreen element to the console. If `document.fullscreenElement` is null, the code logs a message that the change is to leave fullscreen mode.
+
+### HTML
+
+```html
+ <h1>fullscreenchange event example</h1>
+ <div id="fullscreen-div">
+   <button id="toggle-fullscreen">Toggle Fullscreen Mode</button>
+ </div>
+```
+
+### JavaScript
+
 ```js
 function fullscreenchanged = (event) => {
   // document.fullscreenElement will point to the element that
@@ -40,15 +57,17 @@ document.addEventListener('fullscreenchange', fullscreenchanged);
 // or
 document.onfullscreenchange = fullscreenchanged;
 
-// When the element is clicked, enter fullscreen
-myFullscreenElement.onclick = function () {
-  // requestFullscreen() must be in an event handler or it will fail
-  myFullscreenElement.requestFullscreen();
-}
+// When the toggle button is clicked, enter/exit fullscreen
+document.getElementById('toggle-fullscreen').addEventListener('click', (event) => {
+  if (document.fullscreenElement) {
+    // exitFullscreen is only available on the Document object.
+    document.exitFullscreen();
+  } else {
+    el.requestFullscreen();
+  }
+});
 ```
 
-See [Element: fullscreenchange event](/en-US/docs/Web/API/Element/fullscreenchange_event) for another example.
-
 ## Specifications
 
 {{Specifications}}

files/en-us/web/api/document/fullscreenerror_event/index.md

@@ -25,15 +25,14 @@ This event is not cancelable.
 ```js
 const requestor = document.querySelector('div');
 
-document.addEventListener('fullscreenerror', (event) => {
+function handleError(event) {
   console.error('an error occurred changing into fullscreen');
   console.log(event);
-});
+};
+
+document.addEventListener('fullscreenerror', handleError);
 // or
-document.onfullscreenerror = (event) => {
-  console.error('an error occurred changing into fullscreen');
-  console.log(event);
-});
+document.onfullscreenerror = handleError;
 
 requestor.requestFullscreen();
 ```

files/en-us/web/api/document/index.md

@@ -390,9 +390,8 @@ Listen to these events using `addEventListener()` or by assigning an event liste
 
 - {{DOMxRef("Document/fullscreenchange_event", "fullscreenchange")}}
   - : Fired when the `Document` transitions into or out of [full-screen](/en-US/docs/Web/API/Fullscreen_API/Guide) mode.
-- [`fullscreenerror`](/en-US/docs/Web/API/Document/fullscreenerror_event)
+- {{DOMxRef("Document/fullscreenerror_event", "fullscreenerror")}}
   - : Fired if an error occurs while attempting to switch into or out of [full-screen](/en-US/docs/Web/API/Fullscreen_API/Guide) mode.
-    Also available via the {{DOMxRef("Document.onfullscreenerror", "onfullscreenerror")}} property.
 
 ### Keyboard events
 

files/en-us/web/api/element/fullscreenchange_event/index.md

@@ -3,52 +3,32 @@ title: 'Element: fullscreenchange event'
 slug: Web/API/Element/fullscreenchange_event
 tags:
   - API
-  - Element
   - Event
   - Fullscreen API
-  - Fullscreen events
+  - Reference
   - fullscreen
   - fullscreenchange
 browser-compat: api.Element.fullscreenchange_event
 ---
 {{APIRef}}
 
-The `fullscreenchange` event is fired immediately after an {{domxref("Element")}} switches into or out of full-screen mode.
-
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">Bubbles</th>
-      <td>Yes</td>
-    </tr>
-    <tr>
-      <th scope="row">Cancelable</th>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th scope="row">Interface</th>
-      <td>{{domxref("Event")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">Event handler property</th>
-      <td>
-        {{domxref("Element.onfullscreenchange", "onfullscreenchange")}}
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-This event is sent to the `Element` which is transitioning into or out of full-screen mode.
+The `fullscreenchange` event is fired immediately after an {{domxref("Element")}} switches into or out of fullscreen mode.
+
+This event is sent to the `Element` which is transitioning into or out of fullscreen mode.
+
+To find out whether the `Element` is entering or exiting fullscreen mode, check the value of {{domxref("Document.fullscreenElement")}}: if this value is `null` then the element is exiting fullscreen mode, otherwise it is entering fullscreen mode.
+
+This event is not cancelable.
 
 ## Examples
 
 In this example, a handler for the `fullscreenchange` event is added to the element whose ID is `fullscreen-div`.
 
-If the user clicks on the "Toggle Fullscreen Mode" button, the `click` handler will toggle full-screen mode for the `div`. If `document.fullscreenElement` has a value it will exit full-screen mode. If not, the div will be placed into full-screen mode.
+If the user clicks on the "Toggle Fullscreen Mode" button, the `click` handler will toggle fullscreen mode for the `div`. If `document.fullscreenElement` has a value it will exit fullscreen mode. If not, the div will be placed into fullscreen mode.
 
-Remember that by the time the `fullscreenchange` event is handled, the status of the element has already changed. So if the change is to full-screen mode, `document.fullscreenElement` will point to the element that is now in full-screen mode. On the other hand, if `document.fullscreenElement` is null, full-screen mode has been canceled.
+Remember that by the time the `fullscreenchange` event is handled, the status of the element has already changed. So if the change is to fullscreen mode, `document.fullscreenElement` will point to the element that is now in fullscreen mode. On the other hand, if `document.fullscreenElement` is null, fullscreen mode has been canceled.
 
-What that means to the example code is that, if an element is currently in full-screen mode, the `fullscreenchange` handler logs the `id` of the full-screen element to the console. If `document.fullscreenElement` is null, the code logs a message that the change is to leave full-screen mode.
+What that means to the example code is that, if an element is currently in fullscreen mode, the `fullscreenchange` handler logs the `id` of the fullscreen element to the console. If `document.fullscreenElement` is null, the code logs a message that the change is to leave fullscreen mode.
 
 ### HTML
 
@@ -62,23 +42,30 @@ What that means to the example code is that, if an element is currently in full-
 ### JavaScript
 
 ```js
-document.getElementById('fullscreen-div').addEventListener('fullscreenchange', (event) => {
+function fullscreenchanged = (event) => {
   // document.fullscreenElement will point to the element that
   // is in fullscreen mode if there is one. If not, the value
   // of the property is null.
   if (document.fullscreenElement) {
     console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
   } else {
-    console.log('Leaving full-screen mode.');
+    console.log('Leaving fullscreen mode.');
   }
-});
+};
+
+var el = document.getElementById('fullscreen-div');
+
+el.addEventListener('fullscreenchange', fullscreenchanged);
+// or
+el.onfullscreenchange = fullscreenchanged;
 
+// When the toggle button is clicked, enter/exit fullscreen
 document.getElementById('toggle-fullscreen').addEventListener('click', (event) => {
   if (document.fullscreenElement) {
     // exitFullscreen is only available on the Document object.
     document.exitFullscreen();
   } else {
-    document.getElementById('fullscreen-div').requestFullscreen();
+    el.requestFullscreen();
   }
 });
 ```

files/en-us/web/api/element/fullscreenerror_event/index.md

@@ -3,52 +3,36 @@ title: 'Element: fullscreenerror event'
 slug: Web/API/Element/fullscreenerror_event
 tags:
   - API
-  - Element
   - Event
+  - Fullscreen API
   - Reference
+  - fullscreen
   - fullscreenerror
 browser-compat: api.Element.fullscreenerror_event
 ---
 {{APIRef}}
 
-The `fullscreenerror` event is fired when the browser cannot switch to full-screen mode.
+The `fullscreenerror` event is fired when the browser cannot switch to fullscreen mode.
 
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">Bubbles</th>
-      <td>Yes</td>
-    </tr>
-    <tr>
-      <th scope="row">Cancelable</th>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th scope="row">Interface</th>
-      <td>{{domxref("Event")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">Event handler property</th>
-      <td>
-        {{domxref("Element.onfullscreenerror", "onfullscreenerror")}}
-      </td>
-    </tr>
-  </tbody>
-</table>
+As with the [`fullscreenchange` event](/en-US/docs/Web/API/Element/fullscreenchange_event), two `fullscreenerror` events are fired; the first is sent to the {{domxref("Element")}} which failed to change modes, and the second is sent to the {{domxref("Document")}} which owns that element.
 
-As with the {{domxref("Element/fullscreenchange_event", "fullscreenchange")}} event, two `fullscreenerror` events are fired; the first is sent to the {{domxref("Element")}} which failed to change modes, and the second is sent to the {{domxref("Document")}} which contains that element.
+For some reasons that switching into fullscreen mode might fail, see [the guide to the Fullscreen API](/en-US/docs/Web/API/Fullscreen_API/Guide).
 
-For some reasons that switching into full-screen mode might fail, see [the guide to the Fullscreen API](/en-US/docs/Web/API/Fullscreen_API/Guide).
+This event is not cancelable.
 
 ## Examples
 
 ```js
 const requestor = document.querySelector('div');
 
-requestor.addEventListener('fullscreenerror', (event) => {
+function handleError(event) {
   console.error('an error occurred changing into fullscreen');
   console.log(event);
-});
+};
+
+requestor.addEventListener('fullscreenerror', handleError);
+// or
+requestor.onfullscreenerror = handleError;
 
 requestor.requestFullscreen();
 ```

files/en-us/web/api/element/index.md

@@ -179,13 +179,6 @@ _The `Element` interface includes the following properties, defined on the `ARIA
 - {{domxref("Element.ariaValueText")}}
   - : Is a {{domxref("DOMString")}} reflecting the [`aria-valuetext`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext) attribute, which defines the human readable text alternative of aria-valuenow for a range widget.
 
-### Event handlers
-
-- {{domxref("Element.onfullscreenchange")}}
-  - : An event handler for the {{event("fullscreenchange")}} event, which is sent when the element enters or exits full-screen mode. This can be used to watch both for successful expected transitions, but also to watch for unexpected changes, such as when your app is running in the background.
-- {{domxref("Element.onfullscreenerror")}}
-  - : An event handler for the {{event("fullscreenerror")}} event, which is sent when an error occurs while attempting to change into full-screen mode.
-
 ## Methods
 
 _`Element` inherits methods from its parents {{DOMxRef("Node")}}, and its own parent, {{DOMxRef("EventTarget")}}._
@@ -364,10 +357,8 @@ Listen to these events using `addEventListener()` or by assigning an event liste
 
 - {{domxref("Element/fullscreenchange_event", "fullscreenchange")}}
   - : Sent to an {{domxref("Element")}} when it transitions into or out of [full-screen](/en-US/docs/Web/API/Fullscreen_API/Guide) mode.
-    Also available via the {{domxref("Element.onfullscreenchange", "onfullscreenchange")}} property.
 - {{domxref("Element/fullscreenerror_event", "fullscreenerror")}}
   - : Sent to an `Element` if an error occurs while attempting to switch it into or out of [full-screen](/en-US/docs/Web/API/Fullscreen_API/Guide) mode.
-    Also available via the {{domxref("Element.onfullscreenerror", "onfullscreenerror")}} property.
 
 ### Keyboard events