事件委派：有人能给我解释一下这个JavaScript代码吗？

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

函数getTarget（e）{
如果（！e）{
e=窗口事件；
}
返回e.target | | e.srcEvent；
}
功能项完成（e）{
变量项，elParent，El祖父母；
项目=获取目标（e）；
elParent=item.parentNode；
el祖父母=item.parentNode.parentNode；
El祖父母。removeChild（elParent）；
如果（如默认）{
e、 预防默认值（）；
}否则{
e、 returnValue=false；
}
}
var el=document.getElementById（“shoppingList”）；
如果（el.addEventListener）{
el.addEventListener（“点击”，函数（e）{
已完成项目（e）；
}，假）；
}否则{
el.附件（“onclick”，功能（e）{
已完成项目（e）；
});
}

如果将事件附加到父元素，然后单击子元素，如果子元素附加了一个将触发的单击事件，则javaScript还将沿着排序链向下移动，并触发附加到父元素的事件，除非您阻止这种情况发生

html

---

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

如果将事件附加到父元素，并单击子元素，如果子元素附加了将触发的单击事件，javaScript还将沿着一系列排序并触发附加到父元素的事件，除非您阻止这种情况发生

html

---

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

可能会吹毛求疵，但最好说它将沿着链向上（如bubble up）。See可能会吹毛求疵，但更可取的说法是它将沿着链条上升（如“泡沫上升”）。看见

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

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

    console.log(e.target.innerHTML);

});