DEV Community

Discussion on: Explain Event Bubbling Like I'm Five

Collapse
 
evanplaice profile image
Evan Plaice • Edited

Firing an event is like taking a notes in class. You can write notes to yourself (capture) or write notes for others (dispatch).

When you send a note to someone else (dispatch), it'll get passed to the next person (parent) in the chain.

Each person it doesn't belong to passes to will pass it on (bubble).

When the person who it's intended for (has an event listener) receives it they will open it.

If it was intended for them, they can keep.it (event.preventDefault()).

If it was meant for multiple people then can pass it on after they read it (no preventDefault()).

Imagine all notes that don't get captured end up at with the teacher (document). If you want something passed from anybody, tell the teacher to listen for it.


This metaphor works for events you create and pass. But the reality is anything can create an event and the browser fires off events for every interaction.

Any element in the tree from where the event is fired up to the root can listen for the event and respond to it.

The top of the tree is where the browser sees that something happened. That's why events bubble by default.