JavaScript30 day 25: Event capturing, Propagation, Bubbling and Once

Bubbling is where an event triggers on the lowest element in the DOM and then moves up triggering parents in nested order.

event.stopPropagation() Prevents further propagation of the current event in the capturing and bubbling phases.

Event capturing works down through the DOM. Once events have been captured they are triggered and bubble back up.

capture: true Can be passed to an event handler. It runs the function on the way down rather than on the way up.

The once function listens for a click once and unbinds the element for future clickes. A good usecase would be on a store checkout button where you want to prevent the user from checking out twice.

There’s not much to see but the demo is here and the files are on github.