JavaScript Event Constructor

What You’ll Learn

The Event() constructor builds a synthetic Event you can inspect or send with dispatchEvent(). Learn type, bubbles, cancelable, composed, isTrusted, and how it compares to MouseEvent / CustomEvent—with five examples and try-it labs.

Introduction

Browsers create many events for you (clicks, scrolls, loads). Sometimes your script needs to create one too—for tests, custom app signals, or triggering the same listeners without a real user gesture.

new Event("look", options) returns that object. MDN calls it a synthetic event (script-made), as opposed to a browser-fired event. Pair it with target.dispatchEvent(event) to run handlers.

Understanding the Event() Constructor

Pass an event type string and an optional options object. The constructor returns a new Event instance ready to inspect or dispatch.

• type — the event name (for example "look" or "change").
• bubbles — whether the event bubbles up the tree (default false).
• cancelable — whether preventDefault() can cancel it (default false).
• composed — whether it can cross shadow DOM boundaries (default false).
• Workers — available in Web Workers as well as window contexts.

📝 Syntax

new Event(type)
new Event(type, options)

Parameters

• type — A string with the name of the event.
• options (optional) — An object with the fields below.

Option fields (MDN)

Return value

A new Event object.

⚖️ Event vs Related Constructors

Examples Gallery

Examples follow MDN Event(). Use View Output or Try It Yourself.

const evt = new Event("look");

console.log(evt.type);       // "look"
console.log(evt.bubbles);    // false (default)
console.log(evt.cancelable); // false (default)
console.log(evt instanceof Event); // true

look
false
false
true

const evt = new Event("look", {
  bubbles: true,
  cancelable: false,
  composed: false
});

console.log(evt.bubbles);    // true
console.log(evt.cancelable); // false
console.log(evt.composed);   // false

true
false
false

const myDiv = document.getElementById("myDiv");
const out = document.getElementById("out");

myDiv.addEventListener("look", () => {
  out.textContent = "look event received!";
});

// create a look event that bubbles up and cannot be canceled
const evt = new Event("look", { bubbles: true, cancelable: false });

// event can be dispatched from any element, not only the document
myDiv.dispatchEvent(evt);

look event received!

const btn = document.getElementById("btn");
const out = document.getElementById("out");

btn.addEventListener("click", (event) => {
  out.textContent = "isTrusted=" + event.isTrusted;
});

// Synthetic click from script:
btn.dispatchEvent(new Event("click", { bubbles: true }));
// → isTrusted=false

// A real user click on the button would log isTrusted=true

isTrusted=false

const target = new EventTarget();

target.addEventListener("ping", (e) => {
  console.log("Event ping", e.type);
});

target.addEventListener("score", (e) => {
  console.log("score detail=", e.detail);
});

target.dispatchEvent(new Event("ping"));
target.dispatchEvent(new CustomEvent("score", { detail: 42 }));

Event ping ping
score detail= 42

🚀 Common Use Cases

• Unit / integration tests that fire named events without a real user.
• App-level signals on an EventTarget (for example "ready", "sync").
• Triggering the same DOM listeners from a custom toolbar button.
• Teaching demos that show bubbling with a controlled event.
• Worker messaging patterns that use the DOM Event model where available.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Available in Web Workers.
• Creating an event does not fire it—you must dispatch.
• Related learning: dispatchEvent(), addEventListener(), EventTarget(), MouseEvent(), JavaScript hub.

💡 Best Practices