事件委托：有人可以向我解释这个JavaScript代码吗？

Question

我正在研究一本书上的事件委托，但不确定我是否非常了解这个概念。 我知道它用于将事件“附加”到父元素，而不是将其附加到所有子元素。 但是我想如果没有很好的解释，我将无法独自使用它。

 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

如果将事件附加到父元素，然后单击子元素，如果子元素附加了将触发的click事件，则javaScript还将下降一系列附加事件，并触发附加到父元素的事件，除非您阻止从发生。

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

在我的示例中，单击的子元素的innerHTML被记录到控制台。