首先要了解事件委托，我们需要知道为什么以及何时需要实际需要事件委托。
可能有很多情况，但让我们讨论事件委托的两个大用例。1.第一种情况是当我们有一个我们感兴趣的带有许多子元素的元素时，在这种情况下，我们没有将事件处理程序添加到所有这些子元素中，而是将其添加到父元素中，然后确定事件在哪个子元素上触发。
2.事件委托的第二个用例是当我们希望在加载页面时将事件处理程序附加到尚未在DOM中的元素上。当然，那是因为我们不能向不在页面上的内容添加事件处理程序，因此在过时的情况下，我们正在编码。
假设您在加载页面时在DOM中有一个0、10或100个项目的列表，并且有更多项目正在等待添加到列表中。因此，无法为将来的元素附加事件处理程序，或者尚未在DOM中添加那些元素，并且可能还有很多项目，因此将一个事件处理程序附加到每个元素上将无济于事其中。
活动委托
好的，为了讨论事件委托，我们实际上需要讨论的第一个概念是事件冒泡。
事件冒泡：
事件冒泡意味着当某个事件在某个DOM元素上触发或触发时，例如，通过单击下面的图像上的按钮，则所有父元素上也会触发完全相同的事件。
该事件首先在该按钮上触发，但是随后将一次在所有父元素上触发该事件，因此它还将在主元素部分的段落上触发，并且实际上一直在DOM树中向上触发直到作为根的HTML元素。因此，我们说该事件在DOM树中冒泡，这就是为什么将其称为冒泡。
目标元素：实际上首先在其上触发事件的元素称为目标元素，因此导致事件发生的元素称为目标元素。在上面的示例中，当然是单击的按钮。重要的部分是此目标元素作为属性存储在事件对象中，这意味着将在其上触发该事件的所有父元素都将知道该事件的目标元素，因此该事件是在第一时间触发的。
这将我们带入事件委托，因为如果事件在DOM树中冒泡，并且如果我们知道事件在何处触发，则只需将事件处理程序附加到父元素，然后等待事件冒泡，我们就可以然后执行我们打算对目标元素进行的所有操作。此技术称为事件委托。在此示例中，我们可以简单地将事件处理程序添加到main元素中。
好的，再次，事件委托不是在我们感兴趣的原始元素上设置事件处理程序，而是将其附加到父元素上，并基本上在那儿捕获事件，因为事件冒泡了。然后，我们可以使用target element属性对我们感兴趣的元素进行操作。
示例：
现在假设我们页面中有两个列表项，在以编程方式添加这些列表项之后，我们要从其中删除一个或多个项目。使用事件委托技术，我们可以轻松实现目标。
<div class="body">
<div class="top">
</div>
<div class="bottom">
<div class="other">
<!-- other bottom elements -->
</div>
<div class="container clearfix">
<div class="income">
<h2 class="icome__title">Income</h2>
<div class="income__list">
<!-- list items -->
</div>
</div>
<div class="expenses">
<h2 class="expenses__title">Expenses</h2>
<div class="expenses__list">
<!-- list items -->
</div>
</div>
</div>
</div>
</div>
在这些列表中添加项目：
const DOMstrings={
type:{
income:'inc',
expense:'exp'
},
incomeContainer:'.income__list',
expenseContainer:'.expenses__list',
container:'.container'
}
var addListItem = function(obj, type){
//create html string with the place holder
var html, element;
if(type===DOMstrings.type.income){
element = DOMstrings.incomeContainer
html = `<div class="item clearfix" id="inc-${obj.id}">
<div class="item__description">${obj.descripiton}</div>
<div class="right clearfix">
<div class="item__value">${obj.value}</div>
<div class="item__delete">
<button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
</div>
</div>
</div>`
}else if (type ===DOMstrings.type.expense){
element=DOMstrings.expenseContainer;
html = ` <div class="item clearfix" id="exp-${obj.id}">
<div class="item__description">${obj.descripiton}</div>
<div class="right clearfix">
<div class="item__value">${obj.value}</div>
<div class="item__percentage">21%</div>
<div class="item__delete">
<button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
</div>
</div>
</div>`
}
var htmlObject = document.createElement('div');
htmlObject.innerHTML=html;
document.querySelector(element).insertAdjacentElement('beforeend', htmlObject);
}
删除项目：
var ctrlDeleteItem = function(event){
// var itemId = event.target.parentNode.parentNode.parentNode.parentNode.id;
var parent = event.target.parentNode;
var splitId, type, ID;
while(parent.id===""){
parent = parent.parentNode
}
if(parent.id){
splitId = parent.id.split('-');
type = splitId[0];
ID=parseInt(splitId[1]);
}
deleteItem(type, ID);
deleteListItem(parent.id);
}
var deleteItem = function(type, id){
var ids, index;
ids = data.allItems[type].map(function(current){
return current.id;
});
index = ids.indexOf(id);
if(index>-1){
data.allItems[type].splice(index,1);
}
}
var deleteListItem = function(selectorID){
var element = document.getElementById(selectorID);
element.parentNode.removeChild(element);
}
