Demix onplay(ing)/pause from GlobalEventHandlers mixin (#18701)

mdn · Jul 24, 2022 · 4526168 · 4526168
1 parent 07af0a7
commit 4526168
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 268 deletions.
diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt
@@ -8131,8 +8131,8 @@
 /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
-/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onpause	/en-US/docs/Web/API/GlobalEventHandlers/onpause
-/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay	/en-US/docs/Web/API/GlobalEventHandlers/onplay
+/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onpause	/en-US/docs/Web/API/HTMLMediaElement/pause_event
+/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay	/en-US/docs/Web/API/HTMLMediaElement/play_event
 /en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.ontouchend	/en-US/docs/Web/API/Element/touchend_event
 /en-US/docs/Web/API/GlobalEventHandlers/dragexit_event	/en-US/docs/Web/API/Document/dragleave_event
 /en-US/docs/Web/API/GlobalEventHandlers/onabort	/en-US/docs/Web/API/HTMLMediaElement/abort_event
@@ -8185,6 +8185,9 @@
 /en-US/docs/Web/API/GlobalEventHandlers/onmousewheel	/en-US/docs/Web/API/Element/mousewheel_event
 /en-US/docs/Web/API/GlobalEventHandlers/onmozfullscreenchange	/en-US/docs/Web/API/Document/fullscreenchange_event
 /en-US/docs/Web/API/GlobalEventHandlers/onmozfullscreenerror	/en-US/docs/Web/API/Document/fullscreenerror_event
+/en-US/docs/Web/API/GlobalEventHandlers/onpause	/en-US/docs/Web/API/HTMLMediaElement/pause_event
+/en-US/docs/Web/API/GlobalEventHandlers/onplay	/en-US/docs/Web/API/HTMLMediaElement/play_event
+/en-US/docs/Web/API/GlobalEventHandlers/onplaying	/en-US/docs/Web/API/HTMLMediaElement/playing_event
 /en-US/docs/Web/API/GlobalEventHandlers/onpointercancel	/en-US/docs/Web/API/Element/pointercancel_event
 /en-US/docs/Web/API/GlobalEventHandlers/onpointerdown	/en-US/docs/Web/API/Element/pointerdown_event
 /en-US/docs/Web/API/GlobalEventHandlers/onpointerdown/drag	/en-US/docs/Web/API/HTMLElement/drag_event

diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json
@@ -44296,34 +44296,6 @@
       "alecananian"
     ]
   },
-  "Web/API/GlobalEventHandlers/onpause": {
-    "modified": "2020-10-15T21:44:06.725Z",
-    "contributors": [
-      "mfluehr",
-      "fscholz",
-      "sideshowbarker",
-      "wbamberg",
-      "rolfedh",
-      "Guillaume-Heras"
-    ]
-  },
-  "Web/API/GlobalEventHandlers/onplay": {
-    "modified": "2020-10-15T21:44:07.349Z",
-    "contributors": [
-      "mfluehr",
-      "fscholz",
-      "wbamberg",
-      "Guillaume-Heras",
-      "rolfedh"
-    ]
-  },
-  "Web/API/GlobalEventHandlers/onplaying": {
-    "modified": "2020-10-15T22:31:14.016Z",
-    "contributors": [
-      "mfuji09",
-      "bershanskiy"
-    ]
-  },
   "Web/API/Gyroscope": {
     "modified": "2020-10-15T22:08:47.425Z",
     "contributors": [

diff --git a/files/en-us/web/api/globaleventhandlers/index.md b/files/en-us/web/api/globaleventhandlers/index.md
@@ -33,12 +33,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.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")}}
-  - : An [event handler](/en-US/docs/Web/Events/Event_handlers) representing the code to be called when the {{domxref("HTMLMediaElement/play_event", "play")}} event is raised.
-- {{domxref("GlobalEventHandlers.onplaying")}}
-  - : An [event handler](/en-US/docs/Web/Events/Event_handlers) representing the code to be called when the {{domxref("HTMLMediaElement/playing_event", "playing")}} event is raised.
 - {{domxref("GlobalEventHandlers.onprogress")}}
   - : An [event handler](/en-US/docs/Web/Events/Event_handlers) representing the code to be called when the {{domxref("HTMLMediaElement/progress_event", "progress")}} event is raised.
 - {{domxref("GlobalEventHandlers.onratechange")}}

diff --git a/files/en-us/web/api/globaleventhandlers/onpause/index.md b/files/en-us/web/api/globaleventhandlers/onpause/index.md
diff --git a/files/en-us/web/api/globaleventhandlers/onplay/index.md b/files/en-us/web/api/globaleventhandlers/onplay/index.md
diff --git a/files/en-us/web/api/globaleventhandlers/onplaying/index.md b/files/en-us/web/api/globaleventhandlers/onplaying/index.md
diff --git a/files/en-us/web/api/htmlmediaelement/pause_event/index.md b/files/en-us/web/api/htmlmediaelement/pause_event/index.md
@@ -26,36 +26,21 @@ The `pause` event is sent when a request to pause an activity is handled and the
 
 The event is sent once the `pause()` method returns and after the media element's {{domxref("HTMLMediaElement.paused", "paused")}} property has been changed to `true`.
 
-## General info
-
-<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.onpause")}}</td>
-    </tr>
-  </tbody>
-</table>
+This event is not cancelable and does not bubble.
+
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener('pause', (event) => {});
+
+onpause = (event) => { };
+```
+
+## Event type
+
+A generic {{domxref("Event")}}.
 
 ## Examples
 

diff --git a/files/en-us/web/api/htmlmediaelement/play_event/index.md b/files/en-us/web/api/htmlmediaelement/play_event/index.md
@@ -14,34 +14,21 @@ browser-compat: api.HTMLMediaElement.play_event
 
 The `play` event is fired when the `paused` property is changed from `true` to `false`, as a result of the `play` method, or the `autoplay` attribute.
 
-<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.onplay")}}</td>
-    </tr>
-  </tbody>
-</table>
+This event is not cancelable and does not bubble.
+
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener('play', (event) => {});
+
+onplay = (event) => { };
+```
+
+## Event type
+
+A generic {{domxref("Event")}}.
 
 ## Examples
 

diff --git a/files/en-us/web/api/htmlmediaelement/playing_event/index.md b/files/en-us/web/api/htmlmediaelement/playing_event/index.md
@@ -14,34 +14,21 @@ browser-compat: api.HTMLMediaElement.playing_event
 
 The `playing` event is fired after playback is first started, and whenever it is restarted. For example it is fired when playback resumes after having been paused or delayed due to lack of data.
 
-<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.onplaying")}}</td>
-    </tr>
-  </tbody>
-</table>
+This event is not cancelable and does not bubble.
+
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener('playing', (event) => {});
+
+onplaying = (event) => { };
+```
+
+## Event type
+
+A generic {{domxref("Event")}}.
 
 ## Examples
 

diff --git a/files/en-us/web/media/autoplay_guide/index.md b/files/en-us/web/media/autoplay_guide/index.md
@@ -97,7 +97,7 @@ Consider this HTML for a media element:
 <video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)">
 ```
 
-Here we have a {{HTMLElement("video")}} element whose {{htmlattrxref("autoplay", "video")}} attribute is set, with an {{domxref("GlobalEventHandlers.onplay", "onplay")}} event handler set up; the event is handled by a function called `handleFirstPlay()`, which receives as input the `play` event.
+Here we have a {{HTMLElement("video")}} element whose {{htmlattrxref("autoplay", "video")}} attribute is set, with an {{domxref("HTMLMediaElement.play_event", "onplay")}} event handler set up; the event is handled by a function called `handleFirstPlay()`, which receives as input the `play` event.
 
 `handleFirstPlay()` looks like this: