Events propagate from the target element up to the document. A click on a button inside a div inside body triggers listeners on the button, then the div, then the body. Stop it with event.stopPropagation(). Listen in the downward (capturing) phase with addEventListener(type, fn, true).
It registers a callback (event handler) on an element. When the specified event occurs, the callback is called with an event object containing target, currentTarget, type, and methods like preventDefault and stopPropagation.
Use removeEventListener with the same event type and the same function reference. Anonymous functions cannot be removed because you do not have a reference. Store the handler in a variable first.
In a regular function handler, this is the element (event.currentTarget). In an arrow function handler, this is lexical (from the enclosing scope), not the element. Use event.currentTarget to get the element in arrow handlers.
Browse all our FAQs or reach out to our support team
Your learning library
Find your next course. Build something great.
