When JavaScript fires an event, like click
, it doesn't just fire it on the event target (i.e. the thing that was clicked).
It also fires the event on every ancestor element. This means that an event listener on an ancestor can handle clicks on any of
its children.
The code below demonstrates this with a list, where we want to react to the user clicking any list item, and we want our reaction
to take into account which list item they clicked. We use a listener on the entire list, and just check e.target
to see what
list item was clicked.