Why does passing obj.method to addEventListener lose this in JavaScript?
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().
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.
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.
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