JavaScript Event() Constructor

Beginner
5 min read
Updated: Nov 2026
3 examples
Constructor
Decorative image with the word EVENT

Definition

In JavaScript, the Event() constructor creates a new Event object (MDN). Events made this way are called synthetic (script-made), as opposed to browser-fired events. Fire them with dispatchEvent().

Pass the required arguments shown below. Synthetic events are not trusted until you understand isTrusted and dispatch rules.

Syntax

Create an Event. Start with this line.

JavaScript
new Event(type) / new Event(type, options)
CallWhat it does
new Event(type) / new Event(type, options)Primary signature.

Built into the browser. Call new Event(...) — no import required.

Library declarations
JavaScript
new Event(type) / new Event(type, options)

Parameters

ParameterDescription
typeRequired. Event name string
optionsOptional. bubbles, cancelable, composed

Return Value

Return ValueDescription
*A new Event instance

JavaScript Examples

Example 1 — Basic new Event(type)

Create an event with only a type and inspect the default flags.

JavaScript
const evt = new Event("look");

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

How It Works

  1. Pass a type. "look" becomes evt.type.
  2. Defaults apply. With no options object, bubbles and cancelable are false.
  3. You get an Event. instanceof Event is true.
  4. Not fired yet. Creating the object does not notify listeners — that needs dispatchEvent.

Example 2 — bubbles, cancelable, composed

Set the three option flags explicitly (MDN-style).

JavaScript
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
Try It Yourself

How It Works

  1. bubbles: true. After dispatch, the event can travel up the DOM tree.
  2. cancelable: false. preventDefault() will not cancel a default action for this event.
  3. composed: false. The event does not cross shadow DOM boundaries.
  4. Match your listeners. If parents must hear the event, set bubbles: true.

Example 3 — Create and dispatchEvent

Listen for look, then fire a synthetic event on a target.

JavaScript
const target = new EventTarget();
let heard = false;

target.addEventListener("look", () => {
  heard = true;
});

const evt = new Event("look", { bubbles: true });
target.dispatchEvent(evt);

console.log(heard);         // true
console.log(evt.isTrusted); // false
Try It Yourself

How It Works

  1. Prepare a target. Any EventTarget (or DOM node) can listen and dispatch.
  2. Register first. addEventListener("look", …) must run before dispatch.
  3. Create then fire. dispatchEvent(evt) runs the handler → heard becomes true.
  4. Synthetic flag. isTrusted stays false because the event came from your script.
Compatibility

Browser Support

The Event() constructor is marked Baseline Widely available on MDN (since July 2015). It is a browser Web API (also available in Web Workers) - not a Node.js language built-in like Array methods.

✓ Baseline · Widely available

Event()

Create synthetic events in modern browsers. No polyfill needed for current evergreen browsers.

99% Core tag support
Chrome Yes
Full support
Edge Yes
Full support
Firefox Yes
Full support
Safari Yes
Full support
Opera Yes
Full support
HTML element 100% supported

Bottom line: Safe for production web apps. Prefer new Event() over deprecated initEvent(). Use CustomEvent when you need a detail payload.

Frequently Asked Questions

new Event(type, options) creates an Event object. Events built this way are synthetic (script-made). You can inspect them or fire them with target.dispatchEvent(event).
No. MDN marks Event() as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard. It is also available in Web Workers.
An optional options object may include bubbles (default false), cancelable (default false), and composed (default false). composed controls whether the event can cross shadow DOM boundaries.
Create it with new Event("look", { bubbles: true }), then call element.dispatchEvent(event) or document.dispatchEvent(event). Matching listeners run.
Browser-generated events have isTrusted === true. Events from new Event() have isTrusted === false, so handlers can tell real user input from script-made events.
Use CustomEvent when you need a detail payload. Use MouseEvent (or other UIEvent subclasses) for mouse fields. Use Event for a simple named signal with no extra data.

Next: Event bubbles

Learn how the bubbles flag controls event propagation up the DOM.

bubbles tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

10 people found this page helpful

JavaScript EventTarget dispatchEvent() Method JavaScript Event bubbles Property