Demix media load events from GlobalEventHandlers (#18311)

* Demix media load events from GlobalEventHandlers * Remove broken redirects * Re-add onloadend * Re-add redirect * Fix bad merge * Update loadstart event page * Remove links * Fix redirects Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
mdn · Jul 23, 2022 · 98a0352 · 98a0352
1 parent 349be47
commit 98a0352
Show file tree

Hide file tree

Showing 10 changed files with 47 additions and 272 deletions.
diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt
@@ -8125,9 +8125,9 @@
 /en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onemptied	/en-US/docs/Web/API/HTMLMediaElement/emptied_event
 /en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onended	/en-US/docs/Web/API/HTMLMediaElement/ended_event
 /en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.oninvalid	/en-US/docs/Web/API/HTMLInputElement/invalid_event
-/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onloadeddata	/en-US/docs/Web/API/GlobalEventHandlers/onloadeddata
-/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onloadedmetadata	/en-US/docs/Web/API/GlobalEventHandlers/onloadedmetadata
-/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onloadstart	/en-US/docs/Web/API/GlobalEventHandlers/onloadstart
+/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onloadeddata	/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event
+/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onloadedmetadata	/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event
+/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onloadstart	/en-US/docs/Web/API/HTMLMediaElement/loadstart_event
 /en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onmouseenter	/en-US/docs/Web/API/Element/mouseenter_event
 /en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onmouseleave	/en-US/docs/Web/API/Element/mouseleave_event
 /en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onmousewheel	/en-US/docs/Web/API/Element/mousewheel_event
@@ -8169,7 +8169,10 @@
 /en-US/docs/Web/API/GlobalEventHandlers/onkeydown	/en-US/docs/Web/API/Element/keydown_event
 /en-US/docs/Web/API/GlobalEventHandlers/onkeypress	/en-US/docs/Web/API/Element/keypress_event
 /en-US/docs/Web/API/GlobalEventHandlers/onkeyup	/en-US/docs/Web/API/Element/keyup_event
+/en-US/docs/Web/API/GlobalEventHandlers/onloadeddata	/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event
+/en-US/docs/Web/API/GlobalEventHandlers/onloadedmetadata	/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event
 /en-US/docs/Web/API/GlobalEventHandlers/onloadend	/en-US/docs/Web/API/XMLHttpRequest/loadend_event
+/en-US/docs/Web/API/GlobalEventHandlers/onloadstart	/en-US/docs/Web/API/HTMLMediaElement/loadstart_event
 /en-US/docs/Web/API/GlobalEventHandlers/onlostpointercapture	/en-US/docs/Web/API/Element/lostpointercapture_event
 /en-US/docs/Web/API/GlobalEventHandlers/onmousedown	/en-US/docs/Web/API/Element/mousedown_event
 /en-US/docs/Web/API/GlobalEventHandlers/onmouseenter	/en-US/docs/Web/API/Element/mouseenter_event

diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json
@@ -44335,35 +44335,6 @@
       "alecananian"
     ]
   },
-  "Web/API/GlobalEventHandlers/onloadeddata": {
-    "modified": "2020-10-15T21:44:06.913Z",
-    "contributors": [
-      "mfluehr",
-      "fscholz",
-      "sideshowbarker",
-      "wbamberg",
-      "rolfedh",
-      "Guillaume-Heras"
-    ]
-  },
-  "Web/API/GlobalEventHandlers/onloadedmetadata": {
-    "modified": "2020-10-15T21:44:06.544Z",
-    "contributors": [
-      "mfluehr",
-      "fscholz",
-      "sideshowbarker",
-      "wbamberg",
-      "rolfedh",
-      "Guillaume-Heras"
-    ]
-  },
-  "Web/API/GlobalEventHandlers/onloadstart": {
-    "modified": "2019-03-23T22:36:54.161Z",
-    "contributors": [
-      "rolfedh",
-      "Guillaume-Heras"
-    ]
-  },
   "Web/API/GlobalEventHandlers/onpause": {
     "modified": "2020-10-15T21:44:06.725Z",
     "contributors": [

diff --git a/files/en-us/mozilla/firefox/releases/52/index.md b/files/en-us/mozilla/firefox/releases/52/index.md
@@ -106,7 +106,7 @@ Firefox 52 was released on March 7, 2017. This article lists key changes that ar
 - The {{domxref("isSecureContext")}} property has been implemented (see {{bug(1269052)}}).
 - The [Web App Manifest](/en-US/docs/Web/Manifest) install event has been renamed appinstalled (see {{domxref("Window.appinstalled_event")}}, {{domxref("Window.appinstalled", "appinstalled")}}) to avoid confusion with the service worker install event (see {{domxref("ServiceWorkerGlobalScope.install_event", "oninstall")}}). See {{bug(1309099)}} for more details about this update.
 - The {{domxref("DataTransfer.types")}} property of the [Drag and drop API](/en-US/docs/Web/API/HTML_Drag_and_Drop_API) now returns a frozen array of strings rather than a {{domxref("DOMStringList")}} (see {{bug(1298243)}}).
-- The {{domxref("HTMLMediaElement/loadstart_event", "loadstart")}} and `loadend` events are now fired on {{htmlelement("img")}} elements (see {{bug(1264769)}}.
+- The `loadstart` and `loadend` events are now fired on {{htmlelement("img")}} elements (see {{bug(1264769)}}).
 - The {{domxref("Notification.requireInteraction")}} of the [Notifications API](/en-US/docs/Web/API/Notifications_API) has been implemented (see {{bug(862395)}}.)
 - The {{domxref("Window.open()")}} method now has a `noopener` [window feature](/en-US/docs/Web/API/Window/open#window_functionality_features) available (see {{bug(1267339)}}), which mirrors the functionality of the `rel="noopener"` [Link type](/en-US/docs/Web/HTML/Link_types).
 - The {{domxref("CustomElementRegistry.get()")}} method of the [Web Components API](/en-US/docs/Web/Web_Components) has been implemented (see {{bug(1275838)}}).

diff --git a/files/en-us/web/api/globaleventhandlers/index.md b/files/en-us/web/api/globaleventhandlers/index.md
@@ -35,12 +35,6 @@ These event handlers are defined on the {{domxref("GlobalEventHandlers")}} mixin
   - : An [event handler](/en-US/docs/Web/Events/Event_handlers) for processing {{domxref("HTMLFormElement/formdata_event", "formdata")}} events, fired after the entry list representing the form's data is constructed.
 - {{domxref("GlobalEventHandlers.onload")}}
   - : An [event handler](/en-US/docs/Web/Events/Event_handlers) representing the code to be called when the {{domxref("Window/load_event", "load")}} event is raised.
-- {{domxref("GlobalEventHandlers.onloadeddata")}}
-  - : An [event handler](/en-US/docs/Web/Events/Event_handlers) representing the code to be called when the {{domxref("HTMLMediaElement/loadeddata_event", "loadeddata")}} event is raised.
-- {{domxref("GlobalEventHandlers.onloadedmetadata")}}
-  - : An [event handler](/en-US/docs/Web/Events/Event_handlers) representing the code to be called when the {{domxref("HTMLMediaElement/loadedmetadata_event", "loadedmetadata")}} event is raised.
-- {{domxref("GlobalEventHandlers.onloadstart")}}
-  - : An [event handler](/en-US/docs/Web/Events/Event_handlers) representing the code to be called when the {{domxref("HTMLMediaElement/loadstart_event", "loadstart")}} event is raised (when progress has begun on the loading of a resource.)
 - {{domxref("GlobalEventHandlers.onpause")}}
   - : An [event handler](/en-US/docs/Web/Events/Event_handlers) representing the code to be called when the {{domxref("HTMLMediaElement/pause_event", "pause")}} event is raised.
 - {{domxref("GlobalEventHandlers.onplay")}}

diff --git a/files/en-us/web/api/globaleventhandlers/onloadeddata/index.md b/files/en-us/web/api/globaleventhandlers/onloadeddata/index.md
diff --git a/files/en-us/web/api/globaleventhandlers/onloadedmetadata/index.md b/files/en-us/web/api/globaleventhandlers/onloadedmetadata/index.md
diff --git a/files/en-us/web/api/globaleventhandlers/onloadstart/index.md b/files/en-us/web/api/globaleventhandlers/onloadstart/index.md
diff --git a/files/en-us/web/api/htmlmediaelement/loadeddata_event/index.md b/files/en-us/web/api/htmlmediaelement/loadeddata_event/index.md
@@ -14,37 +14,22 @@ browser-compat: api.HTMLMediaElement.loadeddata_event
 
 The **`loadeddata`** event is fired when the frame at the current playback position of the media has finished loading; often the first frame.
 
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">Bubbles</th>
-      <td>No</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">Target</th>
-      <td>Element</td>
-    </tr>
-    <tr>
-      <th scope="row">Default Action</th>
-      <td>None</td>
-    </tr>
-    <tr>
-      <th scope="row">Event handler property</th>
-      <td>{{domxref("GlobalEventHandlers.onloadeddata")}}</td>
-    </tr>
-  </tbody>
-</table>
-
 > **Note:** This event will not fire in mobile/tablet devices if data-saver is on in browser settings.
 
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener('loadeddata', (event) => {});
+
+onloadeddata = (event) => { };
+```
+
+## Event type
+
+A generic {{domxref("Event")}}.
+
 ## Examples
 
 These examples add an event listener for the HTMLMediaElement's `loadeddata` event, then post a message when that event handler has reacted to the event firing.

diff --git a/files/en-us/web/api/htmlmediaelement/loadedmetadata_event/index.md b/files/en-us/web/api/htmlmediaelement/loadedmetadata_event/index.md
@@ -14,36 +14,19 @@ browser-compat: api.HTMLMediaElement.loadedmetadata_event
 
 The `loadedmetadata` event is fired when the metadata has been loaded.
 
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">Bubbles</th>
-      <td>No</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">Target</th>
-      <td>Element</td>
-    </tr>
-    <tr>
-      <th scope="row">Default Action</th>
-      <td>None</td>
-    </tr>
-    <tr>
-      <th scope="row">Event handler property</th>
-      <td>
-        {{domxref("GlobalEventHandlers.onloadedmetadata")}}
-      </td>
-    </tr>
-  </tbody>
-</table>
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener('loadedmetadata', (event) => {});
+
+onloadedmetadata = (event) => { };
+```
+
+## Event type
+
+A generic {{domxref("Event")}}.
 
 ## Examples
 

diff --git a/files/en-us/web/api/htmlmediaelement/loadstart_event/index.md b/files/en-us/web/api/htmlmediaelement/loadstart_event/index.md
@@ -15,28 +15,19 @@ browser-compat: api.HTMLMediaElement.loadstart_event
 
 The **`loadstart`** event is fired when the browser has started to load a resource.
 
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">Bubbles</th>
-      <td>No</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("GlobalEventHandlers/onloadstart", "onloadstart")}}
-      </td>
-    </tr>
-  </tbody>
-</table>
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener('loadstart', (event) => {});
+
+onloadstart = (event) => { };
+```
+
+## Event type
+
+A generic {{domxref("Event")}}.
 
 ## Examples