JavaScript EventTarget Constructor

What You’ll Learn

The EventTarget() constructor creates objects that can listen for and fire events (same API as MDN EventTarget()). You already use EventTarget every day on window, document, and HTML elements. This tutorial shows how to build your own emitters with new EventTarget(), extends EventTarget, and CustomEvent — with five examples and try-it labs.

Introduction

Buttons, inputs, and the window object can all call addEventListener because they implement the EventTarget interface.

With new EventTarget() you get that same ability on a plain JavaScript object — useful for counters, stores, game entities, or any model that should notify listeners when something changes.

Continue with Window methods after you understand custom emitters — DOM objects are EventTargets too.

Understanding the EventTarget Constructor

Calling new EventTarget() returns a new object with the standard event methods. No arguments are required.

• addEventListener(type, listener) — register a handler.
• removeEventListener(type, listener) — unregister the same function reference.
• dispatchEvent(event) — fire an Event or CustomEvent.
• Subclass with extends EventTarget and call super() first.

📝 Syntax

Form of the EventTarget constructor (from MDN):

new EventTarget()

Parameters

• None.

Return value

A new EventTarget instance.

Common patterns

const target = new EventTarget();

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

target.dispatchEvent(new Event("ping"));

// Subclass (usual real-world style):
class Counter extends EventTarget {
  constructor(initialValue = 0) {
    super();
    this.value = initialValue;
  }
}

Examples Gallery

Examples follow MDN EventTarget() patterns. Use View Output or Try It Yourself for each case.

const target = new EventTarget();

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

target.dispatchEvent(new Event("hello"));
// Hello from EventTarget

Hello from EventTarget

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();
  }

  decrement() {
    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
counter.decrement(); // value: 1

value: 1
value: 2
value: 1

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 }
  })
);
// Ada 42

Ada 42

const target = new EventTarget();

function onTick() {
  console.log("tick");
}

target.addEventListener("tick", onTick);
target.dispatchEvent(new Event("tick")); // tick

target.removeEventListener("tick", onTick);
target.dispatchEvent(new Event("tick")); // (no output)

tick

const target = new EventTarget();

target.addEventListener(
  "ready",
  () => console.log("ready once"),
  { once: true }
);

target.dispatchEvent(new Event("ready")); // ready once
target.dispatchEvent(new Event("ready")); // (silent)

ready once

🚀 Common Use Cases

• App models — counters, carts, and settings that notify the UI.
• Mini event buses — decouple modules with typed custom events.
• Game / animation objects — fire spawn, hit, done without DOM nodes.
• Workers — same listen/dispatch pattern off the main thread.
• Teaching the DOM event model — practice without needing HTML first.
• Not a replacement for framework stores — use when native events are enough.

📝 Notes

• Always call super() before using this in a subclass constructor.
• Event type names are case-sensitive strings ("valuechange" ≠ "ValueChange").
• Keep function references if you plan to call removeEventListener.
• dispatchEvent is synchronous — listeners run before the next line continues.
• Available in Web Workers (per MDN).
• DOM nodes already are EventTargets — you do not wrap a button in new EventTarget().

💡 Best Practices