Element: afterscriptexecute — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("afterscriptexecute", handler)

Beschreibung

Das Ereignis afterscriptexecute wird an einem <script>-Element ausgelöst, sobald dessen Code fertig ausgeführt wurde. Es ist das Gegenstück zu beforescriptexecute, das kurz vor der Ausführung feuert. Das Ereignis steigt auf (bubbles). Deshalb kannst du es zentral am document abfangen und über event.target herausfinden, welches Skript gerade gelaufen ist.

Gedacht war es für Diagnose und Überwachung, zum Beispiel um die Ausführungsreihenfolge von Skripten zu protokollieren, Ladezeiten einzelner Skripte zu messen oder nach einem bestimmten Skript eigene Initialisierung anzustoßen.

Wichtig: Das Ereignis gehört zu keinem Webstandard. Es wurde nur von Firefox umgesetzt und gilt als veraltet. Für neuen Code solltest du es nicht verwenden. Standardkonforme Alternativen sind das load-Ereignis des <script>-Elements, document.currentScript und der MutationObserver.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"afterscriptexecute"`.
$handler Pflicht	(event: Event) => void		Callback-Funktion, die ein einfaches `Event`-Objekt erhält. `event.target` ist das `<script>`-Element, dessen Code gerade ausgeführt wurde.
$options	boolean \| AddEventListenerOptions	false	Die üblichen Optionen von `addEventListener`, etwa `once`, `capture` oder `signal`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler bekommt ein Event-Objekt (bubbles: true, cancelable: false).

Beispiele

Skriptausführung zentral protokollieren

// Früh im <head> registrieren, damit auch spätere Skripte erfasst werden
document.addEventListener("afterscriptexecute", (event) => {
  const script = event.target;
  const quelle = script.src || "(Inline-Skript)";
  console.log(`Ausgeführt: ${quelle}`);
});

Ausgeführt: https://example.com/app.js Ausgeführt: (Inline-Skript)

Listener nach dem ersten Treffer wieder entfernen

const nachAnalytics = (event) => {
  if (event.target.src.includes("analytics.js")) {
    console.log("Analytics geladen – initialisiere Tracking");
    document.removeEventListener("afterscriptexecute", nachAnalytics);
  }
};

document.addEventListener("afterscriptexecute", nachAnalytics);

Analytics geladen – initialisiere Tracking

Laufzeit einzelner Skripte messen (mit beforescriptexecute)

const startzeiten = new WeakMap();

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

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

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

Standardkonforme Alternative: load-Ereignis am Skript

const script = document.createElement("script");
script.src = "/js/widget.js";

// load feuert in allen Browsern, nachdem das externe Skript ausgeführt wurde
script.addEventListener("load", () => {
  console.log("widget.js wurde ausgeführt");
}, { once: true });

script.addEventListener("error", () => {
  console.error("widget.js konnte nicht geladen werden");
});

document.head.append(script);

widget.js wurde ausgeführt

// Wichtig · Fallstricke

Nicht standardisiert und veraltet: Das Ereignis gibt es nur in Firefox. Chrome, Edge und Safari haben es nie umgesetzt. Mozilla will es entfernen oder deaktivieren. Für Produktivcode ist es deshalb ungeeignet.
Nur statische Skripte: Historisch feuert das Ereignis nur für <script>-Elemente, die der Parser verarbeitet. Skripte, die du per appendChild() oder append() dynamisch einfügst, lösen es nicht aus.
Nicht für ES-Module: Bei <script type=\"module\"> und in Workern wird das Ereignis nicht ausgelöst.
Früh registrieren: Der Listener erfasst nur Skripte, die nach seiner Registrierung ausgeführt werden. Das Skript, das den Listener anlegt, erfasst er selbst also nicht.
Die on-Eigenschaft ist unzuverlässig: Firefox kannte zeitweise document.onafterscriptexecute. Nutze besser addEventListener. Prüfe außerdem nicht über \"onafterscriptexecute\" in document, ob das Ereignis unterstützt wird.
Alternativen: das load- bzw. error-Ereignis am Skript-Element, document.currentScript innerhalb des Skripts, MutationObserver für neu eingefügte Skripte und PerformanceObserver mit dem Eintragstyp resource für Ladezeiten.

Siehe auch

beforescriptexecute Document.currentScript HTMLScriptElement EventTarget.addEventListener() MutationObserver load Element: cut