Event Delegation: can someone explain me this JavaScript code?

Question

I'm studying the event delegation on a book and I'm not sure I understood very well the concept. I know that it is used to "attach" an event to a parent element instead of attaching it to all the children. But I think I would not be able to use it on my own without a good explanation.

 function getTarget(e) { if(!e) { e = window.event; } return e.target || e.srcEvent; } function itemDone(e) { var item, elParent, elGrandparent; item = getTarget(e); elParent = item.parentNode; elGrandparent = item.parentNode.parentNode; elGrandparent.removeChild(elParent); if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } } var el = document.getElementById("shoppingList"); if (el.addEventListener) { el.addEventListener("click", function(e) { itemDone(e); }, false); } else { el.attachEvent("onclick", function(e) { itemDone(e); }); } 

 <ul id="shoppingList"> <li class="complete"><a href="itemDone.php?id=1">fresh figs</a></li> <li class="complete"><a href="itemDone.php?id=2">pine nuts</a></li> <li class="complete"><a href="itemDone.php?id=3">honey</a></li> <li class="complete"><a href="itemDone.php?id=4">balsamic vine</a></li> </ul> 

Answer 1

If you attach an event to a parent element, and click a child element, if the child element has a click event attached to it that will fire, javaScript will also go down a chain of sorts and fire events attached to parent elements unless you prevent that from happening.

html

<div id="parent">
    <div>child 1</div>
    <div>child 2</div>
    <div>child 3</div>
</div>

javascript

document.getElementById('parent').addEventListener('click', function(e){

    console.log(e.target.innerHTML);

});

jsfiddle

In my example the innerHTML of the child element that is click is logged to the console.