JavaScript/DOM/Event/abort

Der abort-Event-Handler wird bei Abbruch eines Vorgangs ausgelöst. Darunter ist im Allgemeinen kein Abbruch wegen einer Fehlerbedingung zu verstehen, sondern ein Abbruch, der ausdrücklich angefordert wurde. Der User kann eine neue URL abrufen, während das Dokument oder Medien noch laden. Bei Datenzugriffen kann die abort-Methode von AbortController (fetch), XMLHttpRequest oder FileReader aufgerufen worden sein. Nur bei der Indexed DB ist es anders, hier zeigt das abort-Event den Abbruch einer Transaktion an, was vielerlei Gründe haben kann.

bubbles	nein Ausnahme: ja für abort bei IndexedDB Transaktionen
cancelable	nein
mögliche Auslöser	window Objekt (Abbruch des Dokument-Downloads) Audio-, Video- oder SVG-Element AbortSignal Objektinstanz (Abbruch einer Operation über AbortController, z.B. im Fetch API) XMLHttpRequest Objektinstanz (Abbruch des Requests) FileReader Objektinstanz (Abbruch des Lesevorgangs) IDBTransaction- oder IDBDatabase-Objektinstanz (Transaktionsabbruch)
Event-Objekt	Event (AbortSignal, Dokument, Medien) ProgressEvent (XMLHttpRequest und FileReader) SVGEvent

Beispiel 1: Abbruch eines Ladevorgangs

<h1>(beim Aufruf sofort ESC drücken!)</h1>
<img src="onabort.jpg" 
     width="400" 
     height="600" 
     alt="Grafik" 
     onabort="alert('Warum wollen Sie das Bild nicht sehen?')">

Im Beispiel wird eine Grafik in HTML referenziert. Für den Fall, dass der Anwender den Stop-Button im Browser drückt, bevor die Grafik ganz geladen ist, wird mit alert() eine Meldung ausgegeben.

Beispiel 2: Abbruch einer Fetch-Operation

Angenommen, im HTML gäbe es einen Button zum Laden irgendwelcher Daten sowie Button, um diesen Ladevorgang abzubrechen.

let abortCtrl = new AbortController();

document.getElementById("downloadBtn").addEventListener("click", function() {
   fetch(url, { signal: abortCtl.signal })
   .then( /* Response verarbeiten */ )
   .catch(function(fehler) {
      alert("Download fehlgeschlagen: " + fehler.message);
   });
});

document.getElementById("abbruchBtn").addEventListener("click", function abortDownload() {
   abortCtrl.abort();
});

abortCtrl.signal.addEventListener("abort", function() {
   console.log("Die Download-Anforderung wurde abgebrochen");
});

Das Beispiel zeigt eine abbrechbare Fetch-Operation. Falls der Datenempfang mit der abort-Methode des AbortController abgebrochen wird, löst er das abort-Event auf dem AbortSignal Objekt aus. Der EventHandler gibt dann in der Konsole eine Meldung aus.