JavaScript Document afterscriptexecute Event

What You’ll Learn

The Document afterscriptexecute event once fired after a static <script> finished running in Firefox. Learn what it meant, why dynamic scripts were excluded, how it differed from beforescriptexecute, and which portable APIs to use instead—with five examples and try-it labs.

Introduction

Sometimes you want to know when a <script> has finished executing—for logging, analytics, or coordinating code that depends on that script. Early Gecko experiments added a pair of proprietary Document events: beforescriptexecute (before run) and afterscriptexecute (after run).

On Document, afterscriptexecute answered: did this static script just finish? It was never adopted by other browsers, never finished as a standard, and MDN warns not to rely on it.

Understanding afterscriptexecute

A Document event listened on document in supporting Gecko. Per MDN, it fired when a static <script> finished executing—not when you insert a script later with appendChild() or similar.

• Fires after a static script has been executed (legacy Firefox).
• Does not fire for scripts added dynamically (for example appendChild()).
• Generic Event — no special payload properties; event.target is the script element.
• Sibling — beforescriptexecute ran earlier and could cancel execution.
• Related — Document.currentScript identifies the script currently running.
• Status — Deprecated and Non-standard on MDN; not part of any specification.

🔎 Static vs Dynamic Scripts

This is the detail beginners miss. MDN’s Document page is explicit:

That limitation is another reason not to build features on this event. Portable load / error listeners attach to the script element you create, whether it is static or dynamic.

📝 Syntax

Use the event name with addEventListener, or set the handler property (legacy Firefox only):

addEventListener("afterscriptexecute", (event) => { });

onafterscriptexecute = (event) => { };

Event type

A generic Event.

Typical listener (MDN style)

function finished(e) {
  console.log(`Finished script with ID: ${e.target.id}`);
}

document.addEventListener("afterscriptexecute", finished);
// or
document.onafterscriptexecute = finished;

⚖️ afterscriptexecute vs beforescriptexecute vs load

🚀 What to Use Instead

For an external classic script, attach standard listeners to the script element itself:

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

script.addEventListener("load", () => {
  console.log("Script loaded and executed");
});

script.addEventListener("error", () => {
  console.error("Script failed to load");
});

document.head.appendChild(script);

For modules, use <script type="module"> and normal import / top-level await so dependencies are explicit. To watch scripts being inserted into the DOM, use MutationObserver—not proprietary execute events.

Examples Gallery

Examples follow MDN Document: afterscriptexecute event and show safe feature detection plus modern replacements. In most current browsers the proprietary event will never fire—the labs still teach the patterns clearly.

function finished(e) {
  console.log(`Finished script with ID: ${e.target.id}`);
}

document.addEventListener("afterscriptexecute", finished);

// In legacy Firefox, a static <script id="demo"> could fire this after it ran.
// In modern browsers it typically never fires.

Listener attached (event may never fire in modern browsers)

document.onafterscriptexecute = (event) => {
  console.log("Script finished (onafterscriptexecute)");
  console.log("target id:", event.target && event.target.id);
};

// Assigning again replaces the previous handler.
// Prefer addEventListener when you need multiple listeners.

Handler property assigned (legacy Firefox only)

const supported = "onafterscriptexecute" in document;

console.log("onafterscriptexecute in document:", supported);

if (supported) {
  document.addEventListener("afterscriptexecute", () => {
    console.log("Legacy path: afterscriptexecute");
  });
} else {
  console.log("Use script load/error events instead");
}

onafterscriptexecute in document: false
Use script load/error events instead

document.addEventListener("afterscriptexecute", (e) => {
  console.log("afterscriptexecute for:", e.target && e.target.id);
});

// Dynamic insert — MDN: afterscriptexecute does NOT fire for this path
const dynamic = document.createElement("script");
dynamic.id = "dynamic-demo";
dynamic.textContent = "console.log('dynamic script ran');";
document.body.appendChild(dynamic);

console.log("Dynamic script appended");
console.log("MDN: afterscriptexecute skips dynamically added scripts");
console.log("Prefer script load/error or modules instead");

Dynamic script appended
MDN: afterscriptexecute skips dynamically added scripts
Prefer script load/error or modules instead

const script = document.createElement("script");
script.textContent = "window.__demoRan = true;";

script.addEventListener("load", () => {
  // Note: inline scripts may not fire load the same way as external ones.
  console.log("load fired (external scripts are the usual case)");
});

// External example pattern:
// script.src = "https://example.com/lib.js";
// script.addEventListener("load", () => console.log("executed"));
// script.addEventListener("error", () => console.error("failed"));
// document.head.appendChild(script);

console.log("Prefer load/error over afterscriptexecute");
console.log("demo flag set via inline script:", typeof window.__demoRan !== "undefined");
document.body.appendChild(script);
console.log("after append, __demoRan:", window.__demoRan === true);

Prefer load/error over afterscriptexecute
demo flag set via inline script: false
after append, __demoRan: true

🚀 Common Use Cases

• Understanding legacy Firefox / Gecko code that monitored static script execution.
• Migrating old extensions or pages off proprietary script-execute events.
• Interview / history knowledge of early HTML script lifecycle proposals.
• Teaching why static-vs-dynamic limits and standards matter for DOM events.
• Choosing load / error, currentScript, or ES modules for real production work.

🔧 How It Works

📝 Notes

• MDN: Deprecated and Non-standard — avoid in production.
• Applies to static scripts only; dynamic appendChild() scripts do not fire it.
• Proprietary to Gecko; never a cross-browser API; not part of any specification.
• Modern Firefox stopped shipping useful web-facing support for these events.
• Related learning: currentScript, scripts, addEventListener(), JavaScript hub.

💡 Best Practices