Please explain the event delegation in jquery

Event delegation is a Jquery event handling technique in which you can add an event listener to a parent element instead of adding the event listener to its children elements.. lets try to explain it more with an example:

lets say we have the following HTML code:

<div id="wrapper">

        <a href="whatever">anchor1</a>

        <a href="whatever">anchor2</a>

        <a href="whatever">anchor3</a>

        <a href="whatever">anchor4</a>

</div>

and we want to alert the user when he clicks on an anchor element with its text.

if we are not using delegation you might use this code:

$("#wrapper a").on("click",function(){

   alert($(this).text());

});

in the code above you are adding an event listener to each anchor element. instead you can use delegation as follow:

$("#wrapper").on("click","a",function(){

   alert($(this).text());

});

in the code that uses delegation above you just added the event listener to the parent element "wrapper "  which will make the event listener listen to any of the anchor conatined withinn the wrapper.

the use of delegation above will help u use lesser memory by attaching only one event listner instead of4 in our case,also it has another important advantage that the event listener will also listen to any events occuring on any future added anchor elements(using javascript) to the wrapper div

there is a method .delegate() in jquery however its more recommneded to use the delegation the way used in the example  above  as of jquery version1.7 

Delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector.

This may be for existing descendants or futurly added ones.

if we have a list with id='list' and this list contains a set of anchors like below:

    <ul id="list">

        <li><a href="http://domain1.com">Item #1</a></li>

        <li><a href="/local/path/1">Item #2</a></li>

        <li><a href="/local/path/2">Item #3</a></li>

        <li><a href="http://domain4.com">Item #4</a></li>

    </ul>

then we can define an anchor click event for all like this :

$( "#list a" ).on( "click", function( event ) {

.

.

});

jquery delegation in a simpler way is to define an event handler on a parent element so that all the children of that parent responds to that function. It gives us the freedom to define a single event handler for different child elements. It also provides the functionality to define other event handlers on the child elements.