Event delegation can be used for handling DOM events efficiently. The basic principle behind event delegation is bubbling of events. An event handler can be attached to a parent node and any event that occurs within its child element will bubble up if not already captured on its way to the parent node.

<div class="root">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
    <div>F</div>
    <div>G</div>
</div>

// Using jQuery
$(document).ready(function () {
    $(".root").on("click", function (e) {
        alert(e.target.innerHTML);
        // depending on e.target we can call necessary function (delegation)..
    });
});

// Using DOM APIs
var el = document.getElementsByClassName("root");
el[0].addEventListener("click", function(e) {
    alert(e.target.innerHTML);
});