JavaScript Element afterscriptexecute Event

What You’ll Learn

The afterscriptexecute event once fired after a script finished running in Firefox. Learn what it meant, why it is deprecated and non-standard, how to feature-detect it safely, 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 events: beforescriptexecute (before run) and afterscriptexecute (after run).

afterscriptexecute answered a simple question: did this 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

An instance event on Element (listened on document or other nodes in supporting Gecko). It notified you after script execution completed.

• Fires after a script has been executed (legacy Firefox).
• Not cancelable — you cannot undo execution after the fact.
• Generic Event — no special payload properties.
• Sibling — beforescriptexecute ran earlier and could cancel execution.
• Status — Deprecated and Non-standard on MDN; not part of any specification.

📝 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.

Cancelable

MDN: this event is not cancelable. Calling preventDefault() does not undo a script that already ran.

⚖️ 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 Element: 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.

document.addEventListener("afterscriptexecute", (event) => {
  console.log("afterscriptexecute fired");
  console.log("target:", event.target && event.target.nodeName);
});

// In legacy Firefox, inserting/running a <script> could fire this.
// In modern browsers it typically never fires.

Listener attached (event may never fire in modern browsers)

document.onafterscriptexecute = (event) => {
  console.log("Script finished (onafterscriptexecute)");
};

// 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("beforescriptexecute", () => {
  console.log("1) before script execute");
});

document.addEventListener("afterscriptexecute", () => {
  console.log("2) after script execute");
});

// Historical order in supporting Firefox:
// beforescriptexecute → script runs → afterscriptexecute
// Both events are deprecated and non-standard.

1) before script execute
2) after script execute

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 script execution.
• Migrating old extensions or pages off proprietary script-execute events.
• Interview / history knowledge of early HTML script lifecycle proposals.
• Teaching why feature detection and standards matter for DOM events.
• Choosing load / error or ES modules for real production work.

🔧 How It Works

📝 Notes

• MDN: Deprecated and Non-standard — avoid in production.
• Not cancelable; sibling beforescriptexecute was the cancelable one.
• Proprietary to Gecko; never a cross-browser API.
• Modern Firefox stopped shipping useful web-facing support for these events.
• Related learning: addEventListener(), toggleAttribute(), tagName, JavaScript hub.

💡 Best Practices