JavaScript EventTarget() Constructor

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

Definition

The EventTarget() constructor creates a new EventTarget instance — an object that can listen for and dispatch events (MDN). Use new EventTarget() (no parameters).

Pass the required arguments shown below. Use this when you need a plain object that can listen for and dispatch events.

Syntax

Create an EventTarget. Start with this line.

JavaScript
new EventTarget()
CallWhat it does
new EventTarget()Primary signature.

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

Library declarations
JavaScript
new EventTarget()

Parameters

This member has no parameters beyond those shown in the signature.

Return Value

Return ValueDescription
*A new EventTarget instance

JavaScript Examples

Example 1 — Basic new EventTarget()

Create a target, listen, and dispatch a simple event.

JavaScript
const target = new EventTarget();

target.addEventListener("hello", () => {
  console.log("Hello from EventTarget");
});

target.dispatchEvent(new Event("hello"));
Try It Yourself

How It Works

  1. Construct. new EventTarget() returns a blank event target.
  2. Listen. addEventListener("hello", …) registers the handler.
  3. Dispatch. dispatchEvent(new Event("hello")) delivers the event.
  4. No DOM needed. This works without any HTML element.

Example 2 — extends EventTarget (MDN Counter)

Subclass EventTarget and fire valuechange with CustomEvent.

JavaScript
class Counter extends EventTarget {
  constructor(initialValue = 0) {
    super();
    this.value = initialValue;
  }
  emitChange() {
    this.dispatchEvent(
      new CustomEvent("valuechange", { detail: this.value })
    );
  }
  increment() {
    this.value++;
    this.emitChange();
  }
}

const counter = new Counter(0);
counter.addEventListener("valuechange", (e) => {
  console.log("value:", e.detail);
});
counter.increment(); // value: 1
counter.increment(); // value: 2
Try It Yourself

How It Works

  1. Extend. class Counter extends EventTarget inherits the event API.
  2. Call super(). The constructor must run EventTarget() via super().
  3. Dispatch on change. increment() fires valuechange with the new value.
  4. Listen outside. Callers subscribe without coupling to Counter internals.

Example 3 — CustomEvent Detail

Pass structured data with detail on a plain EventTarget bus.

JavaScript
const bus = new EventTarget();

bus.addEventListener("user:login", (e) => {
  console.log(e.detail.name, e.detail.id);
});

bus.dispatchEvent(
  new CustomEvent("user:login", {
    detail: { name: "Ada", id: 42 }
  })
);
Try It Yourself

How It Works

  1. Bus object. A plain EventTarget acts as a tiny event bus.
  2. CustomEvent. Use it when you need a detail payload.
  3. Read detail. The listener gets data from e.detail.
  4. Decouple. Publishers and subscribers only share the event type name.
Compatibility

Browser Support

EventTarget() is marked Baseline Widely available on MDN (since September 2020). Available in Web Workers. Not supported as a constructor in Internet Explorer.

✓ Baseline · Widely available

EventTarget()

Create custom event emitters in modern Chrome, Firefox, Safari, and Edge. Same API works in Web Workers.

96% Browser support
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
EventTarget() Excellent

Bottom line: Safe for modern browsers. Prefer extends EventTarget + super() for app objects; use new EventTarget() for tiny buses.

Frequently Asked Questions

new EventTarget() creates a plain object that can listen for and dispatch events using addEventListener, removeEventListener, and dispatchEvent — without being a DOM element.
No. MDN marks EventTarget() as Baseline Widely available (since September 2020). It is not Deprecated, Experimental, or Non-standard. It is available in Web Workers.
Rarely. Most often you call super() inside a class that extends EventTarget, so your own objects can fire custom events. MDN notes explicit new EventTarget() is uncommon outside that pattern.
Elements like button or document already implement EventTarget. The constructor lets you build non-DOM objects (stores, counters, services) that speak the same event API.
Any Event or CustomEvent. CustomEvent is popular because detail can carry data, for example new CustomEvent("valuechange", { detail: 42 }).
Yes. MDN marks the constructor as available in Web Workers, so you can use the same listen/dispatch pattern off the main thread.

Next: addEventListener()

Register event handlers on elements and custom EventTargets.

addEventListener 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)

8 people found this page helpful

JavaScript Introduction JavaScript EventTarget addEventListener() Method