Up to now we have only attached a listener to the respective event target. For example we knew that a button is going to be clicked, so we attached a listener to the button. The event can be detected on any ancestor (parent, parent of parent, etc) of the actual target component.

Therefore this will detect all clicks on the page!

document.body.addEventListener('click', listener, false)

You can then use event.target to figure out where on the page did the event fire. The event has in fact three propagation stages:

capture mode: from the root to the actual target. In this phase, only event listeners that pass a true 3rd parameter to addEventListener() will be called
target mode, at the target: in this phase, all relevant event listeners (at the target only) will be called
bubble mode: from the target back up to the root. In this phase, only event listeners that pass a false 3rd parameter to addEventListener() will be called

Why is this useful? For example

listening to events from more related targets at the same time, e.g. from all members of a <ul> list without having to add a listener to each
an ancestor can choose to cancel the default browser behavior for the event during capturing phase (by calling event.preventDefault() ). In this case the event will continue to propagate
an ancestor can choose to stop the event from propagating by calling event.stopPropagation()

Note that not all events bubble! The event property bubbles will let you know at runtime. But event documentation includes this documentation for each event type.

A few events that do not bubble have correspondents that do bubble: focus and blur do not bubble but focusin and focusout do bubble. Same goes for mouseover and mouseout (which bubble) as different from mouseenter and mouseleave which do not bubble.

Event return value

Remember that if your event listener returns false, the event is cancelled and preventDefault() is called.

If your event listener returns a value that is not "false", it will be stored in the returnValue property of the event. You can also store that explicitly (and it will not be overridden if your listener does not explicitly return, or return null). The return value can be useful during capturing and bubbling, different listeners can read it or write it.