Rework HID event pages per new structure

files/en-us/_redirects.txt

@@ -8312,6 +8312,8 @@
 /en-US/docs/Web/API/GlobalFetch/GlobalFetch.fetch()	/en-US/docs/Web/API/fetch
 /en-US/docs/Web/API/GlobalFetch/fetch	/en-US/docs/Web/API/fetch
 /en-US/docs/Web/API/Guide/Events/Creating_and_triggering_events	/en-US/docs/Web/Events/Creating_and_triggering_events
+/en-US/docs/Web/API/HID/onconnect	/en-US/docs/Web/API/HID/connect_event
+/en-US/docs/Web/API/HID/ondisconnect	/en-US/docs/Web/API/HID/disconnect_event
 /en-US/docs/Web/API/HIDDevice/oninputreport	/en-US/docs/Web/API/HIDDevice/inputreport_event
 /en-US/docs/Web/API/HTMLAnchorElement.rel	/en-US/docs/Web/API/HTMLAnchorElement/rel
 /en-US/docs/Web/API/HTMLAnchorElement.relList	/en-US/docs/Web/API/HTMLAnchorElement/relList

files/en-us/web/api/hid/connect_event/index.md

@@ -0,0 +1,56 @@
+---
+title: "HID: connect event"
+slug: Web/API/HID/connect_event
+page-type: web-api-event
+tags:
+  - API
+  - Reference
+  - Event
+  - HID
+  - Experimental
+browser-compat: api.HID.connect_event
+---
+{{securecontext_header}}{{APIRef("WebHID API")}}{{SeeCompatTable}}
+
+The **`connect`** event of the {{domxref("HID")}} interface fires when the user agent connects to a HID device.
+
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener('connect', (event) => { })
+
+onconnect = (event) => { }
+```
+
+## Event type
+
+A {{domxref("HIDConnectionEvent")}}. Inherits from {{domxref("Event")}}.
+
+{{InheritanceDiagram("HIDConnectionEvent")}}
+
+## Event properties
+
+_In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._
+
+- {{domxref("HIDConnectionEvent.device", "device")}} {{ReadOnlyInline}}
+  - : The {{domxref("HIDDevice")}} the event is fired for.
+
+## Examples
+
+In the following example an event listener is registered to listen for the connection of a device. The name of the device is then printed to the console using {{domxref("HIDDevice.productName")}}.
+
+```js
+navigator.hid.addEventListener('connect', ({device}) => {
+  console.log(`HID connected: ${device.productName}`);
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}

files/en-us/web/api/hid/disconnect_event/index.md

@@ -0,0 +1,56 @@
+---
+title: "HID: disconnect event"
+slug: Web/API/HID/disconnect_event
+page-type: web-api-event
+tags:
+  - API
+  - Reference
+  - Event
+  - HID
+  - Experimental
+browser-compat: api.HID.disconnect_event
+---
+{{securecontext_header}}{{APIRef("WebHID API")}}{{SeeCompatTable}}
+
+The **`disconnect`** event of the {{domxref("HID")}} interface fires when the user agent disconnects a HID device.
+
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener('disconnect', (event) => { })
+
+ondisconnect = (event) => { }
+```
+
+## Event type
+
+A {{domxref("HIDConnectionEvent")}}. Inherits from {{domxref("Event")}}.
+
+{{InheritanceDiagram("HIDConnectionEvent")}}
+
+## Event properties
+
+_In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._
+
+- {{domxref("HIDConnectionEvent.device", "device")}} {{ReadOnlyInline}}
+  - : The {{domxref("HIDDevice")}} the event is fired for.
+
+## Examples
+
+In the following example an event listener is registered to listen for the disconnection of a device. The name of the device is then printed to the console using {{domxref("HIDDevice.productName")}}.
+
+```js
+navigator.hid.addEventListener('connect', ({device}) => {
+  console.log(`HID connected: ${device.productName}`);
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}

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

@@ -21,13 +21,6 @@ The **`HID`** interface provides methods for connecting to _HID devices_, listin
 
 _This interface also inherits properties of its parent, {{domxref("EventTarget")}}._
 
-### Event handlers
-
-- {{domxref("HID.onconnect")}} {{Experimental_Inline}}
-  - : Fired when an HID device is connected.
-- {{domxref("HID.ondisconnect")}} {{Experimental_Inline}}
-  - : Fired when an HID device is disconnected.
-
 ## Methods
 
 _This interface also inherits methods of its parent, {{domxref("EventTarget")}}._
@@ -37,6 +30,13 @@ _This interface also inherits methods of its parent, {{domxref("EventTarget")}}.
 - {{domxref("HID.requestDevice","requestDevice()")}} {{Experimental_Inline}}
   - : Returns a {{jsxref("Promise")}} that resolves with an array of connected {{domxref("HIDDevice")}} objects. Calling this function will trigger the user agent's permission flow in order to gain permission to access one selected device from the returned list of devices.
 
+### Events
+
+- {{domxref("HID.connect_event", "connect")}} {{Experimental_Inline}}
+  - : Fired when an HID device is connected.
+- {{domxref("HID.disconnect_event", "disconnect")}} {{Experimental_Inline}}
+  - : Fired when an HID device is disconnected.
+
 ## Specifications
 
 {{Specifications}}