currentTarget vs. target: Who's Listening vs. Who Shouted
event.currentTarget is the element listening for an event, while event.target is the element that triggered it. This is vital for event delegation patterns. Be careful: currentTarget is only valid inside the handler and becomes null afterward.
event.currentTarget is "who's listening"—the element with the attached listener—while event.target is "who shouted"—the element that originated the event. This is crucial for event delegation, where one parent handler manages events for many children. For example, clicking a child <div> makes it the target, but the parent with the listener is the currentTarget. The main footgun: event.currentTarget becomes null outside the handler's synchronous execution, so cache its value if needed for async work.
Read the original → developer.mozilla.org
- #dom
- #events
- #javascript
- #typescript
- #web-apis
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.