Document: afterscriptexecute — Ereignis · JavaScript-Referenz

Signatur

document.addEventListener("afterscriptexecute", handler)

Beschreibung

Das Ereignis afterscriptexecute wird ausgelöst, sobald ein statisches <script>-Element – also eines, das beim Parsen des HTML-Quelltexts im Dokument steht – die Ausführung seines Codes abgeschlossen hat. Das Gegenstück beforescriptexecute feuert direkt vor der Ausführung.

Ziel des Ereignisses (event.target) ist das jeweilige <script>-Element. Das Ereignis steigt bis zum document auf, deshalb kann man es zentral mit document.addEventListener("afterscriptexecute", handler) oder über die Eigenschaft document.onafterscriptexecute abfangen. Das Ereignisobjekt ist ein einfaches Event ohne zusätzliche Eigenschaften.

Einsatzgebiete waren vor allem Diagnose und Messung: etwa protokollieren, welche Skripte in welcher Reihenfolge fertig waren, oder die Laufzeit einzelner Skripte zusammen mit beforescriptexecute messen. Für Skripte, die nachträglich per appendChild() o. Ä. eingefügt werden, wird das Ereignis nicht ausgelöst.

Da das Ereignis nie standardisiert wurde und nur in Firefox existiert(e), sollte es in Produktivcode nicht verwendet werden. Portable Alternativen sind das load-Ereignis des Script-Elements, document.currentScript, ein MutationObserver oder die Performance-APIs.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"afterscriptexecute"`.
$handler Pflicht	(event: Event) => void		Callback, der nach der Ausführung eines statischen Skripts aufgerufen wird. `event.target` ist das betreffende `<script>`-Element.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen wie `once`, `capture` oder `signal`.

Rückgabewert

Typ

void

Beschreibung

addEventListener() gibt nichts zurück. Der Handler erhält ein Event-Objekt.

Beispiele

Fertig ausgeführte Skripte protokollieren

// Muss vor den zu beobachtenden <script>-Tags stehen
const supported = 'onafterscriptexecute' in document;

if (supported) {
  document.addEventListener('afterscriptexecute', (event) => {
    const script = event.target;
    console.log('Fertig:', script.src || '(Inline-Skript)');
  });
} else {
  console.log('afterscriptexecute wird nicht unterstützt');
}

Fertig: https://example.com/app.js Fertig: (Inline-Skript)

Laufzeit einzelner Skripte messen (mit beforescriptexecute)

const startTimes = new WeakMap();

document.addEventListener('beforescriptexecute', (e) => {
  startTimes.set(e.target, performance.now());
});

document.addEventListener('afterscriptexecute', (e) => {
  const start = startTimes.get(e.target);
  if (start !== undefined) {
    const ms = (performance.now() - start).toFixed(1);
    console.log(`${e.target.src || 'inline'}: ${ms} ms`);
  }
});

https://example.com/vendor.js: 12.4 ms

Über die on-Property und wieder entfernen

document.onafterscriptexecute = (e) => {
  console.log('Skript beendet:', e.target.id || e.target.src);
};

// Nach dem vollständigen Parsen nicht mehr benötigt
document.addEventListener('DOMContentLoaded', () => {
  document.onafterscriptexecute = null;
});

Skript beendet: config

Portable Alternative: load-Ereignis des Script-Elements

const script = document.createElement('script');
script.src = '/js/widget.js';
script.addEventListener('load', () => {
  console.log('widget.js geladen und ausgeführt');
});
script.addEventListener('error', () => {
  console.error('widget.js konnte nicht geladen werden');
});
document.head.append(script);

widget.js geladen und ausgeführt

// Wichtig · Fallstricke

Nicht standardisiert: Das Ereignis ist nicht Teil der HTML-Spezifikation und wurde nur in Firefox (Gecko) umgesetzt. Chrome, Edge und Safari unterstützen es nicht. In neueren Firefox-Versionen gilt es als veraltet bzw. wurde entfernt – immer per 'onafterscriptexecute' in document prüfen.
Nur statische Skripte: Für per JavaScript eingefügte <script>-Elemente (appendChild(), append() usw.) feuert das Ereignis nicht. Dafür das load-Ereignis des Elements verwenden.
Reihenfolge der Registrierung: Der Listener greift nur bei Skripten, die nach seiner Registrierung ausgeführt werden. Er muss also früh im Dokument stehen.
Module: Für type="module"-Skripte ist das Verhalten nicht zuverlässig definiert.
Für Messungen besser PerformanceObserver bzw. Resource Timing nutzen, für den Zugriff auf das laufende Skript document.currentScript.

Siehe auch

Document: beforescriptexecute Document.currentScript HTMLScriptElement EventTarget.addEventListener() DocumentPictureInPicture: enter