DOM Events

An event is a signal that something has happened — the user clicked a button, typed into a field, submitted a form, or the page finished loading. The browser fires these events continuously as the user interacts with the page, and JavaScript can "listen" for specific ones and run code in response. This is the mechanism that makes web pages interactive rather than static documents: without events, a button click would just be a click, with nothing listening or reacting to it.

addEventListener() is the standard way to react to events. It's called on the element you care about, takes the event type as a string (like "click") and a callback function to run when that event fires. It's preferred over the older approaches — an inline onclick="..." attribute in the HTML, or assigning a function directly to element.onclick — for a simple but important reason: addEventListener() lets you attach multiple listeners for the same event on the same element without one overwriting another. Assigning to .onclick, by contrast, replaces whatever handler was there before, since there can only ever be one.

Every listener callback automatically receives an event object as its first argument, carrying details about what just happened. event.type tells you the event's name (like "click"), event.target is the actual element the event originated from (the element the user clicked, for instance), and event.currentTarget is the element the listener is attached to — these two can differ when the event bubbles up from a descendant. event.preventDefault() stops the browser's default behavior for that event (like a link navigating, or a form submitting), and event.stopPropagation() stops the event from continuing to bubble up to ancestor elements.

removeEventListener() detaches a previously attached listener, but only if you pass it the exact same function reference that was originally added — an anonymous inline function can never be removed, because there's no way to refer back to it afterward. This is the main reason to write listener callbacks as named functions (or store the function in a variable) whenever you might need to remove them later, such as when a component is unmounted or a temporary interaction ends.

When an event happens on a nested element, it doesn't just fire on that element — it travels through the DOM tree in two phases. The capturing phase runs first, traveling from the document down to the target element; the bubbling phase runs second, traveling back up from the target through each of its ancestors. By default, addEventListener() listens during the bubbling phase; passing true (or { capture: true }) as a third argument listens during the capturing phase instead. This matters because a click on a deeply nested <span> will also trigger click listeners on its parent, grandparent, and so on, all the way up — a behavior the next lesson on event delegation puts to direct, practical use.