Fix events in AbortSignal (#12865)

* Fix events in AbortSignal * Remove link to onabort * Remove another onabort link * Add missing Syntax and Event type sections
mdn · Feb 9, 2022 · f30ab5c · f30ab5c
1 parent eec77e3
commit f30ab5c
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 110 deletions.
diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt
@@ -7077,6 +7077,7 @@
 /en-US/docs/Web-based_protocol_handlers	/en-US/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers
 /en-US/docs/Web-related_technologies	/en-US/docs/Related
 /en-US/docs/Web/API/AbortController/FetchController	/en-US/docs/Web/API/AbortController/AbortController
+/en-US/docs/Web/API/AbortSignal/onabort	/en-US/docs/Web/API/AbortSignal/abort_event
 /en-US/docs/Web/API/AbstractWorker	/en-US/docs/Web/API/Worker
 /en-US/docs/Web/API/AbstractWorker.onerror	/en-US/docs/Web/API/Worker/onerror
 /en-US/docs/Web/API/AbstractWorker/onerror	/en-US/docs/Web/API/Worker/onerror
@@ -7775,7 +7776,7 @@
 /en-US/docs/Web/API/FetchEvent_clone	/en-US/docs/Web/API/FetchEvent
 /en-US/docs/Web/API/FetchSignal	/en-US/docs/Web/API/AbortSignal
 /en-US/docs/Web/API/FetchSignal/aborted	/en-US/docs/Web/API/AbortSignal/aborted
-/en-US/docs/Web/API/FetchSignal/onabort	/en-US/docs/Web/API/AbortSignal/onabort
+/en-US/docs/Web/API/FetchSignal/onabort	/en-US/docs/Web/API/AbortSignal/abort_event
 /en-US/docs/Web/API/File.lastModifiedDate	/en-US/docs/Web/API/File/lastModifiedDate
 /en-US/docs/Web/API/File.name	/en-US/docs/Web/API/File/name
 /en-US/docs/Web/API/File.size	/en-US/docs/Web/API/Blob/size

diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json
@@ -26155,13 +26155,6 @@
       "fscholz"
     ]
   },
-  "Web/API/AbortSignal/onabort": {
-    "modified": "2020-10-29T06:23:31.502Z",
-    "contributors": [
-      "chrisdavidmills",
-      "fscholz"
-    ]
-  },
   "Web/API/AbsoluteOrientationSensor": {
     "modified": "2020-10-15T22:08:42.127Z",
     "contributors": [

diff --git a/files/en-us/web/api/abortsignal/abort_event/index.md b/files/en-us/web/api/abortsignal/abort_event/index.md
@@ -3,65 +3,48 @@ title: 'AbortSignal: abort event'
 slug: Web/API/AbortSignal/abort_event
 tags:
   - API
-  - AbortSignal
-  - DOM
   - Event
-  - abort
+  - Reference
 browser-compat: api.AbortSignal.abort_event
 ---
-{{APIRef}}
-
-The **`abort`** event of the [Fetch API](/en-US/docs/Web/API/Fetch_API) is fired when a fetch request is aborted, i.e. using {{domxref("AbortController.abort()")}}.
-
-<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</th>
-      <td>
-        <code
-          ><a href="/en-US/docs/Web/API/AbortSignal/onabort">onabort</a></code
-        >
-      </td>
-    </tr>
-  </tbody>
-</table>
+{{APIRef("DOM")}}
+
+The **`abort`** event of the {{domxref("AbortSignal")}} is fired when the associated request is aborted, i.e. using {{domxref("AbortController.abort()")}}.
+
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener('abort', event => { })
+
+onabort = event => { }
+```
+
+## Event type
+
+A generic {{DOMxRef("Event")}} with no added properties.
 
 ## Examples
 
-In the following snippets, we create a new `AbortController` object, and get its {{domxref("AbortSignal")}} (available using the `signal` property). Later on we check whether or not the signal has been aborted using the `onabort` property, and send an appropriate log to the console.
+In the following snippets, we create a new `AbortController` object, and get its {{domxref("AbortSignal")}} (available using the `signal` property). Later on we check whether or not the signal has been aborted using an event handler property,
 
-You can use the `abort` event in an [`addEventListener`](/en-US/docs/Web/API/EventTarget/addEventListener) method:
+You can detect the `abort` event using an [`addEventListener`](/en-US/docs/Web/API/EventTarget/addEventListener) method:
 
 ```js
 var controller = new AbortController();
 var signal = controller.signal;
 
-signal.addEventListener('abort', function() {
- console.log('Request aborted');
-});
+signal.addEventListener('abort', () => { console.log('Request aborted'); });
 ```
 
-Or use the [`onabort`](/en-US/docs/Web/API/AbortSignal/onabort) event handler property:
+Or use the `onabort` event handler property:
 
 ```js
 var controller = new AbortController();
 var signal = controller.signal;
 
-signal.onabort = function() {
-  console.log('Request aborted');
-};
+signal.onabort = () => { console.log('Request aborted'); };
 ```
 
 ## Specifications
@@ -71,7 +54,3 @@ signal.onabort = function() {
 ## Browser compatibility
 
 {{Compat}}
-
-## See also
-
-- [Fetch API](/en-US/docs/Web/API/Fetch_API)
diff --git a/files/en-us/web/api/abortsignal/index.md b/files/en-us/web/api/abortsignal/index.md
@@ -25,14 +25,6 @@ _The AbortSignal interface also inherits properties from its parent interface, {
 - {{domxref("AbortSignal.reason")}} {{readonlyInline}}
   - : A JavaScript value providing the abort reason, once the signal has aborted.
 
-## Events
-
-Listen to this event using [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener) or by assigning an event listener to the `oneventname` property of this interface.
-
-- [`abort`](/en-US/docs/Web/API/AbortSignal/abort_event)
-  - : Invoked when the DOM requests the signal is communicating with is/are aborted.
-    Also available via the [`onabort`](/en-US/docs/Web/API/AbortSignal/onabort) property.
-
 ## Methods
 
 _The **`AbortSignal`** interface inherits methods from its parent interface, {{domxref("EventTarget")}}._
@@ -45,6 +37,14 @@ _The **`AbortSignal`** interface inherits methods from its parent interface, {{d
 - {{domxref("AbortSignal.abort()")}}
   - : Returns an **`AbortSignal`** instance that is already set as aborted.
 
+## Events
+
+Listen to this event using [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener) or by assigning an event listener to the `oneventname` property of this interface.
+
+- [`abort`](/en-US/docs/Web/API/AbortSignal/abort_event)
+  - : Invoked when the DOM requests the signal is communicating with is/are aborted.
+    Also available via the `onabort` property.
+
 ## Examples
 
 The following snippet shows how we might use a signal to abort downloading a video using the [Fetch API](/en-US/docs/Web/API/Fetch_API).

diff --git a/files/en-us/web/api/abortsignal/onabort/index.md b/files/en-us/web/api/abortsignal/onabort/index.md
diff --git a/files/en-us/web/api/abortsignal/throwifaborted/index.md b/files/en-us/web/api/abortsignal/throwifaborted/index.md
@@ -15,7 +15,8 @@ browser-compat: api.AbortSignal.throwIfAborted
 
 The **`throwIfAborted()`** method throws the signal's abort {{domxref("AbortSignal.reason", "reason")}} if the signal has been aborted; otherwise it does nothing.
 
-An API that needs to support aborting can accept an {{domxref("AbortSignal")}} object and use **`throwIfAborted()`** to test and throw when the `abort` event is signalled.
+An API that needs to support aborting can accept an {{domxref("AbortSignal")}} object and use `throwIfAborted()` to test and throw when the [`abort`](/en-US/docs/Web/API/AbortSignal/abort_event) event is signalled.
+
 This method can also be used to abort operations at particular points in code, rather than passing to functions that take a signal.
 
 ## Syntax
@@ -26,7 +27,7 @@ throwIfAborted()
 
 ### Return value
 
-{{jsxref('undefined')}}
+None.
 
 ## Examples