What is this in an arrow function event handler in JavaScript?
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.
Verify This Answer
Cross-check this information using these trusted sources:
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