DOM event delegation is a way for responding to ui-events via a single common parent rather than each child, using the magic of event "bubbling" (aka event propagation).
When an event is triggered on an element, the following happens:
The event is dispatched to its EventTarget, and any event listeners discovered there are activated. Bubbling events will then activate any further event listeners discovered by following the EventTarget's parent chain upstream, looking for any event listeners registered on each succeeding EventTarget. This upward propagation will continue until the Document.
In browsers, event bubbling serves as the foundation for event delegation. You may now connect an event handler to a single parent element, and it will be run anytime an event happens on any of its child nodes (and any of their children in turn). This is called event delegation. Here's an example of how it works in practice:
<ul onclick="alert(event.type + '!')">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
With that example if you were to click on any of the child <li> nodes, you would see an alert of "click!", even though there is no click handler bound to the <li> you clicked on. If we bound onclick="..." to each <li> you would get the same effect.
