Event Typing

Event typing has a few common gotchas that can lead to frustrating compile errors or incorrect type assumptions.

Trap 1: Using the Base Event Type

When you annotate an event as Event instead of letting TypeScript infer the specific type, you lose access to type-specific properties:

button.addEventListener(
  "click", (e: Event) => {
    // e.clientX — ❌ not on Event
    // e.button — ❌ not on Event
  }
);

// FIX: Let TS infer or use specific type:
button.addEventListener(
  "click", (e: MouseEvent) => {
    console.log(e.clientX); // ✅
  }
);

Trap 2: this in Event Handlers

When you use a class method as an event handler, this might not refer to the class instance. Use arrow functions or .bind(this) to preserve context:

class FormHandler {
  button = document.querySelector("button")!;

  handleClick(e: MouseEvent) {
    // this might be the button, NOT the class!
    console.log(this); // HTMLButtonElement!
  }

  constructor() {
    // ❌ this is wrong in handleClick
    this.button.addEventListener(
      "click", this.handleClick
    );

    // ✅ Use arrow function
    this.button.addEventListener(
      "click", (e) => this.handleClick(e)
    );
  }
}

Trap 3: React Event Types are Different from DOM Types

React wraps native DOM events in SyntheticEvent objects. The property names are the same but the types are different. Always use React.MouseEvent, React.KeyboardEvent, etc. in React code:

// React — NOT DOM!
function handleClick(
  e: React.MouseEvent<HTMLButtonElement>
) {
  console.log(e.clientX);
}

// The generic parameter is
// the element type!
// <HTMLButtonElement>
// <HTMLInputElement>
// <HTMLDivElement>

Trap 4: target vs currentTarget

e.target is typed as EventTarget | null — it's the element that ORIGINATED the event. e.currentTarget is typed as the specific element type — it's the element the listener is attached to:

button.addEventListener(
  "click", (e) => {
    // e.currentTarget is HTMLButtonElement
    // e.target is EventTarget | null

    // e.target might be a child element!
    // Always narrow e.target:
    if (e.target instanceof HTMLElement) {
      console.log(e.target.tagName);
    }
  }
);