Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent. That event listener analyzes bubbled events to find a match on child elements.

For example, lets say you had a <ul> with X amount of <li>’s. If the <li>’s were added dynamically and you want to add an event listener onto the <li>’s, it would eventually become very copious. To circumvent this, we can instead an event listener onto its parent that will fire for all decendants matching a selector that exist now or will exist in the future.

Lets show it in code:

<ul id="list">
    <li><a href="#somelink">Item 1</a></li>
    <li><a href="#somelink">Item 2</a></li>
    <li><a href="#somelink">Item 3</a></li>

The wrong way in JS:

// jquery
$('#list a').on('click', function(e) {

While this will still work, if we are adding new list items onto the <ul> dynamically, the newely added ones will not recieve the event handlers.

The correct way in Javascript:

$('#list').on('click', 'a', function(e) {

In summary, Event delegation refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated. It allows us to attach a single event listener for elements that exist now or in the future.