How this Works in JavaScript Event Handlers

How this Works in JavaScript Event Handlers

Event handlers are a common place where this causes confusion. The rules depend on how you register the handler.

Regular Function Handler: this Is the Element

const btn = document.querySelector("button");
btn.addEventListener("click", function () {
  console.log(this); // the button element
});

When the browser calls the handler, it sets this to the element that received the event.

Arrow Function Handler: this Is Lexical

btn.addEventListener("click", () => {
  console.log(this); // the enclosing scope's this, NOT the button
});

Arrows do not get this from the call. They inherit from where they were written. If you need the element, use event.currentTarget:

btn.addEventListener("click", (e) => {
  console.log(e.currentTarget); // the button
});

Inline HTML Handler: this Is the Element

<button onclick="console.log(this)">Click</button>

The browser wraps this in a function with this bound to the element.

jQuery-Style Handlers

In jQuery, this in a handler is the element matched by the selector, not always event.currentTarget. Be aware of the library you use.

Detaching a Method

const obj = {
  name: "Kunal",
  handleClick() { console.log(this.name); },
};
btn.addEventListener("click", obj.handleClick); // undefined

The method is detached from obj when passed. The browser calls it with this as the button, not obj. Fix with bind or an arrow:

btn.addEventListener("click", obj.handleClick.bind(obj));
btn.addEventListener("click", () => obj.handleClick());

Best Practice

• Use event.currentTarget to get the element, regardless of this.
• Use arrows if you want the enclosing this (e.g., a class method).
• Use regular functions if you want this to be the element.
• Always bind detached methods.

The Takeaway

In regular function event handlers, this is the element. In arrow handlers, this is lexical (not the element; use event.currentTarget). Detached methods lose their this; bind them or wrap in an arrow. Prefer event.currentTarget for the element.