Event delegation is a method of simplifying otherwise very verbose event handling code in browsers. The method allows you to leverage the browser’s built-in event propagation system to execute logic based on user or network input.
The diagram above illustrates event propagation if a user were to click on a cell in a table on a webpage. It illustrates three phases the browser goes through:
This is fundamental browser behavior, and as such, essential knowledge for web
developers. Using this system we can write our programs more simply. We can
place an event listener on an ancestor element to handle all events that occur
below it. The classic example is placing a listener on a list (
and capturing bubbling click events from the
<li>s below it. This results in
reduced RAM usage for the webpage and less code for developers to maintain.
Here we add an event listener on the table body that can print out any cell’s
contents. We introspect on
e.target to identify the specific element that was
The strategy may become cumbersome if your logic is looking for an intermediate
element, say, trigger logic on
e.target is a nested
have to use
e.target.className.split(' ') and look for specific classes.
Most events bubble. But some don’t.
For these you can execute the event listener (function) during the capture phase
instead. Simply provide
true as the third argument to
e.target is still the initiating dom node. The browser must be
computing that before the propagation phases are performed.
If for whatever reason you want to stop an event from firing on any other
nodes in the chain use
Event.stopPropagation(). It even works on events triggered
during the capture phase.
More often though you’ll be using
Event.preventDefault() as it prevents
behavior such as toggling checkboxes and loading other pages after clicking
links anchor tags.
If you are considering using jQuery for it’s event delegation and event normalization features consider the following lighter weight implementations of the Event Delegation Pattern
React provides a Synthetic Event api which attempts to provide a more uniform interface for events. For example it sets all events to bubble by default.
To define listeners that execute during the capture phase simply append
Capture to the function name, e.g.,
onFocusCapture will execute the
focus during the capture phase.