The answer
The enclosing lexical scope's this, not the element. Arrow functions do not get this from the call. Use event.currentTarget to access the element inside an arrow handler.
this in Event Handlers and DOM in JavaScript
What is this in an arrow function event handler in JavaScript?
More FAQs in this in Event Handlers and DOM in JavaScript
The element that received the event. When the browser calls a regular function handler, it sets this to the element registered with addEventListener.
Because the method is detached from obj when passed as a reference. The browser calls it with this as the element, not obj. Fix with .bind(obj) or an arrow wrapper () => obj.method().
Use event.currentTarget. It always refers to the element the listener was registered on, regardless of whether this is the element (regular function) or lexical (arrow function).
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.