Adapt BroadcastChannel events to the new event structure (#12982)

files/en-us/_redirects.txt

@@ -7343,8 +7343,10 @@
 /en-US/docs/Web/API/BroadcastChannel.BroadcastChannel	/en-US/docs/Web/API/BroadcastChannel/BroadcastChannel
 /en-US/docs/Web/API/BroadcastChannel.close	/en-US/docs/Web/API/BroadcastChannel/close
 /en-US/docs/Web/API/BroadcastChannel.name	/en-US/docs/Web/API/BroadcastChannel/name
-/en-US/docs/Web/API/BroadcastChannel.onmessage	/en-US/docs/Web/API/BroadcastChannel/onmessage
+/en-US/docs/Web/API/BroadcastChannel.onmessage	/en-US/docs/Web/API/BroadcastChannel/message_event
 /en-US/docs/Web/API/BroadcastChannel.postMessage	/en-US/docs/Web/API/BroadcastChannel/postMessage
+/en-US/docs/Web/API/BroadcastChannel/onmessage	/en-US/docs/Web/API/BroadcastChannel/message_event
+/en-US/docs/Web/API/BroadcastChannel/onmessageerror	/en-US/docs/Web/API/BroadcastChannel/messageerror_event
 /en-US/docs/Web/API/ByteLengthQueueingStrategy	/en-US/docs/Web/API/ByteLengthQueuingStrategy
 /en-US/docs/Web/API/ByteLengthQueueingStrategy/ByteLengthQueueingStrategy	/en-US/docs/Web/API/ByteLengthQueuingStrategy/ByteLengthQueuingStrategy
 /en-US/docs/Web/API/ByteLengthQueueingStrategy/size	/en-US/docs/Web/API/ByteLengthQueuingStrategy/size

files/en-us/_wikihistory.json

@@ -29722,24 +29722,6 @@
       "teoli"
     ]
   },
-  "Web/API/BroadcastChannel/onmessage": {
-    "modified": "2020-10-15T21:32:14.523Z",
-    "contributors": [
-      "gtk2k",
-      "fscholz",
-      "chrisdavidmills",
-      "nmve",
-      "jpmedley",
-      "teoli"
-    ]
-  },
-  "Web/API/BroadcastChannel/onmessageerror": {
-    "modified": "2020-10-15T21:56:50.077Z",
-    "contributors": [
-      "fscholz",
-      "chrisdavidmills"
-    ]
-  },
   "Web/API/BroadcastChannel/postMessage": {
     "modified": "2020-10-15T21:32:14.854Z",
     "contributors": [

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

@@ -14,7 +14,7 @@ The **Broadcast Channel API** allows basic communication between {{glossary("bro
 
 {{AvailableInWorkers}}
 
-By creating a {{domxref("BroadcastChannel")}} object, you can receive any messages that are posted to it. You don't have to maintain a reference to the frames or workers you wish to communicate with: they can “subscribe” to a particular channel by constructing their own {{domxref("BroadcastChannel")}} with the same name, and have bi-directional communication between all of them.
+By creating a {{domxref("BroadcastChannel")}} object, you can receive any messages that are posted to it. You don't have to maintain a reference to the frames or workers you wish to communicate with: they can "subscribe" to a particular channel by constructing their own {{domxref("BroadcastChannel")}} with the same name, and have bi-directional communication between all of them.
 
 ![The principle of the Broadcast Channel API](broadcastchannel.png)
 
@@ -44,11 +44,11 @@ The API doesn't associate any semantics to messages, so it is up to the code to
 
 ### Receiving a message
 
-When a message is posted, a {{event("message")}} event is dispatched to each {{domxref("BroadcastChannel")}} object connected to this channel. A function can be run for this event with the {{domxref("BroadcastChannel.onmessage", "onmessage")}} event handler:
+When a message is posted, a [`message`](/en-us/docs/Web/API/BroadcastChannel/message_event) event is dispatched to each {{domxref("BroadcastChannel")}} object connected to this channel. A function can be run for this event using the {{domxref("BroadcastChannel/message_event", "onmessage")}} event handler:
 
 ```js
 // A handler that only logs the event to the console:
-bc.onmessage = function (ev) { console.log(ev); }
+bc.onmessage = event => { console.log(eve t); }
 ```
 
 ### Disconnecting a channel

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

@@ -6,7 +6,6 @@ tags:
   - Broadcast Channel API
   - BroadcastChannel
   - Constructor
-  - Experimental
   - HTML API
   - Reference
 browser-compat: api.BroadcastChannel.BroadcastChannel

files/en-us/web/api/broadcastchannel/close/index.md

@@ -2,21 +2,18 @@
 title: BroadcastChannel.close()
 slug: Web/API/BroadcastChannel/close
 tags:
-  - API
   - Broadcast Channel API
-  - BroadcastChannel
-  - Experimental
-  - HTML API
   - Method
   - Reference
 browser-compat: api.BroadcastChannel.close
 ---
 {{APIRef("BroadCastChannel API")}}
 
 The **`BroadcastChannel.close()`** terminates the connection to
-the underlying channel, allowing the object to be garbage collected. This is a necessary
-step to perform as there is no other way for a browser to know that this channel is not
-needed anymore.
+the underlying channel, allowing the object to be garbage collected.
+This is a necessary step to perform
+as there is no other way for a browser to know
+that this channel is not needed anymore.
 
 {{AvailableInWorkers}}
 

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

@@ -30,13 +30,6 @@ _This interface also inherits properties from its parent, {{domxref("EventTarget
 - {{domxref("BroadcastChannel.name")}} {{ReadOnlyInline}}
   - : Returns a {{domxref("DOMString")}}, the name of the channel.
 
-### Event handlers
-
-- {{domxref("BroadcastChannel.onmessage")}}
-  - : An [event handler](/en-US/docs/Web/Events/Event_handlers) property that specifies the function to execute when a {{event("message")}} event is fired on this object.
-- {{domxref("BroadcastChannel.onmessageerror")}}
-  - : An [event handler](/en-US/docs/Web/Events/Event_handlers) called when a {{domxref("MessageEvent")}} of type {{domxref("MessageError")}} is fired—that is, when it receives a message that cannot be deserialized.
-
 ## Methods
 
 _This interface also inherits methods from its parent, {{domxref("EventTarget")}}._
@@ -50,10 +43,10 @@ _This interface also inherits methods from its parent, {{domxref("EventTarget")}
 
 - [`message`](/en-US/docs/Web/API/BroadcastChannel/message_event)
   - : Fired when a message arrives on the channel.
-    Also available via the [`onmessage`](/en-US/docs/Web/API/BroadcastChannel/onmessage) property.
+    Also available via the `onmessage` property.
 - [`messageerror`](/en-US/docs/Web/API/BroadcastChannel/messageerror_event)
   - : Fired when a message arrives that can't be deserialized.
-    Also available via the [`onmessageerror`](/en-US/docs/Web/API/BroadcastChannel/onmessageerror) property.
+    Also available via the `onmessageerror` property.
 
 ## Specifications
 

files/en-us/web/api/broadcastchannel/message_event/index.md

@@ -2,52 +2,49 @@
 title: 'BroadcastChannel: message event'
 slug: Web/API/BroadcastChannel/message_event
 tags:
-  - Communication
   - Event
-  - EventSource
   - Reference
-  - message
-  - messaging
 browser-compat: api.BroadcastChannel.message_event
 ---
 {{APIRef}}
 
 The `message` event is fired on a {{domxref('BroadcastChannel')}} object when a message arrives on that channel.
 
-<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("MessageEvent")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">Event handler property</th>
-      <td>
-        <code
-          ><a href="/en-US/docs/Web/API/BroadcastChannel/onmessage"
-            >onmessage</a
-          ></code
-        >
-      </td>
-    </tr>
-  </tbody>
-</table>
+## Syntax
 
-## Examples
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener('message', event => { })
+onmessage = event => { }
+```
+
+## Event type
+
+A {{domxref("MessageEvent")}}. Inherits from {{domxref("Event")}}.
 
-### Live example
+{{InheritanceDiagram("TrackEvent")}}
+
+## Event properties
+
+_In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._
+
+- {{domxref("MessageEvent.data", "data")}} {{readonlyInline}}
+  - : The data sent by the message emitter.
+- {{domxref("MessageEvent.origin", "origin")}} {{readonlyInline}}
+  - : A string representing the origin of the message emitter.
+- {{domxref("MessageEvent.lastEventId", "lastEventId")}} {{readonlyInline}}
+  - : A string representing a unique ID for the event.
+- {{domxref("MessageEvent.source", "source")}} {{readonlyInline}}
+  - : A _message event source_, which is either a {{glossary("WindowProxy")}}, a {{domxref("MessagePort")}}, or a {{domxref("ServiceWorker")}} object representing the message emitter.
+- {{domxref("MessageEvent.ports", "ports")}} {{readonlyInline}}
+  - : An array of {{domxref("MessagePort")}} objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g. in channel messaging or when sending a message to a shared worker).
+
+## Examples
 
 In this example there's a "sender" [`<iframe>`](/en-US/docs/Web/HTML/Element/iframe) that broadcasts the contents of a [`<textarea>`](/en-US/docs/Web/HTML/Element/textarea) when the user clicks a button. There are two "receiver" iframes that listen to the broadcast message and write the result into a [`<div>`](/en-US/docs/Web/HTML/Element/div) element.
 
-#### Sender
+### Sender
 
 ```html hidden
 <h1>Sender</h1>
@@ -93,7 +90,7 @@ broadcastMessageButton.addEventListener('click', () => {
 })
 ```
 
-#### Receiver 1
+### Receiver 1
 
 ```html hidden
 <h1>Receiver 1</h1>
@@ -116,12 +113,12 @@ h1 {
 
 ```js
 const channel = new BroadcastChannel('example-channel');
-channel.addEventListener('message', (event) => {
+channel.addEventListener('message', event => {
   received.textContent = event.data;
 });
 ```
 
-#### Receiver 2
+### Receiver 2
 
 ```html hidden
 <h1>Receiver 2</h1>
@@ -144,7 +141,7 @@ h1 {
 
 ```js
 const channel = new BroadcastChannel('example-channel');
-channel.addEventListener('message', (event) => {
+channel.addEventListener('message', event => {
   received.textContent = event.data;
 });
 ```

files/en-us/web/api/broadcastchannel/messageerror_event/index.md

@@ -7,34 +7,37 @@ browser-compat: api.BroadcastChannel.messageerror_event
 ---
 {{APIRef}}
 
-The `messageerror` event is fired on a {{domxref('BroadcastChannel')}} object when a message arrives on the channel that can't be deserialized.
-
-<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("MessageEvent")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">Event handler property</th>
-      <td>
-        <code
-          ><a href="/en-US/docs/Web/API/BroadcastChannel/onmessageerror"
-            >onmessageerror</a
-          ></code
-        >
-      </td>
-    </tr>
-  </tbody>
-</table>
+The `messageerror` event is fired on a {{domxref('BroadcastChannel')}} object when a message that can't be deserialized arrives on the channel.
+
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener('messageerror', event => { })
+onmessageerror = event => { }
+```
+
+## Event type
+
+A {{domxref("MessageEvent")}}. Inherits from {{domxref("Event")}}.
+
+{{InheritanceDiagram("TrackEvent")}}
+
+## Event properties
+
+_In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._
+
+- {{domxref("MessageEvent.data", "data")}} {{readonlyInline}}
+  - : The data sent by the message emitter.
+- {{domxref("MessageEvent.origin", "origin")}} {{readonlyInline}}
+  - : A string representing the origin of the message emitter.
+- {{domxref("MessageEvent.lastEventId", "lastEventId")}} {{readonlyInline}}
+  - : A string representing a unique ID for the event.
+- {{domxref("MessageEvent.source", "source")}} {{readonlyInline}}
+  - : A _message event source_, which is either a {{glossary("WindowProxy")}}, a {{domxref("MessagePort")}}, or a {{domxref("ServiceWorker")}} object representing the message emitter.
+- {{domxref("MessageEvent.ports", "ports")}} {{readonlyInline}}
+  - : An array of {{domxref("MessagePort")}} objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g. in channel messaging or when sending a message to a shared worker).
 
 ## Examples
 
@@ -43,25 +46,25 @@ This code uses [`addEventListener`](/en-US/docs/Web/API/EventTarget/addEventList
 ```js
 const channel = new BroadcastChannel('example-channel');
 
-channel.addEventListener('message', (event) => {
+channel.addEventListener('message', event => {
   received.textContent = event.data;
 });
 
-channel.addEventListener('messageerror', (event) => {
+channel.addEventListener('messageerror', event => {
   console.error(event);
 });
 ```
 
-The same, but using the [`onmessage`](/en-US/docs/Web/API/BroadcastChannel/onmessage) and [`onmessageerror`](/en-US/docs/Web/API/BroadcastChannel/onmessageerror) event handler properties:
+The same, but using the `onmessage` and `onmessageerror` event handler properties:
 
 ```js
 const channel = new BroadcastChannel('example-channel');
 
-channel.onmessage = (event) => {
+channel.onmessage = event => {
   received.textContent = event.data;
 };
 
-channel.onmessageerror = (event) => {
+channel.onmessageerror = event => {
   console.log(event);
 };
 ```

files/en-us/web/api/broadcastchannel/name/index.md

@@ -3,9 +3,6 @@ title: BroadcastChannel.name
 slug: Web/API/BroadcastChannel/name
 tags:
   - Broadcast Channel API
-  - BroadcastChannel
-  - Experimental
-  - HTML API
   - Property
   - Read-only
   - Reference