JavaScript------事件委托（event delegation）

Posted 2020-08-17 AlinaXia

简单的说，事件委托（event delegation)是在DOM上层（也就是在触发事件的元素的父元素上）定义事件的处理程序，而不是定义在触发事件的元素本身上。

  首先我们来举这样一个例子：我有N个li元素，我想让点击过的li元素背景颜色都变为黄色。非常简单的一个例子是吧？

  我们可以通过如下代码实现：

var oBox = document.getElementById(‘box‘);
var aLi = oBox.children;
for(var i=0;i<aLi.length;i++){
    addEvent(aLi[i],‘click‘,function(){
        this.style.background=‘yellow‘;
    })
}
 首先这样写是没有问题的，效果完全可以实现，但是如果我有上百个Li元素呢？那我可能就需要为这上百个元素添加相同的处理程序，而且，这上百个程序做的是同一件事情。毋庸置疑，这势必会影响性能。
再者说，如果我想为不同的li元素设置不同的的处理程序，也就是说，当每个li元素被点击时，会有各自不同的事件发生。那你的处理方法是否需要给每个li添加事件监听？同样，如果我有上百个li元素的
时候，你是不是要对每个li进行获取，然后添加事件？如果是，那将是多么可怕的一件事情！

那么我们有没有其他理想的处理方式呢？有，那就是事件委托。
 
所谓事件委托，其实就是我们利用浏览器提供的事件冒泡来处理为所有的子元素的添加的事件。当子元素的事件冒泡到父元素上时，我们通过event.target（不兼容IE8以下版本）或者
event.srcElement(不兼容Firefox)来获取当前被点击元素的引用，这样，我们就可以像如下代码一样，将事件温和的委托给li的父元素也就是ul了：

var oBox = document.getElementById(‘box‘);
var aLi = oBox.children;
oBox.onclick = function(ev){
    var oEvent = ev || event;
    var oTarget = oEvent.target || oEvent.srcElement;//解决浏览器的兼容性问题
    if(oTarget.tagName == ‘LI‘){
/*此处的‘LI‘是需要大写的，若要小写可将if内的判断条件改为（oTarget.tagName.toLowerCase == ‘li‘）*/
        oTarget.style.background = ‘yellow‘;
    }
}
至此，最简单的事件委托举例就完成了~
（以下是摘自javascript忍者秘籍，给大家进行下专业性的总结~）
事件委托是一种开发更高性能，且可伸缩Web应用程序的最好技术。
因为事件冒泡（bubbling）是唯一一种在所有浏览器中都可以使用的技术（事件捕获（capturing）在IE9之前版本不可用），所以重要的是要确保将委托应用到事件目标元素的祖先元素上。这样才能
确保最终冒泡到所委托的元素上。
可惜的是，在很多浏览器中，submit、change、focus和blur事件的冒泡实现都有很严重的问题。比如在老版的IE浏览器中，submit和change事件根本没有冒泡，而兼容W3C DOM的浏览器对两个事件
都实现了冒泡。所以，如果我们使用事件委托，必须解决如何克服这些缺陷问题。大家都知道，兼容性问题是最头疼的一项任务，所以不是一两句话可以说的清的，在以后的学习中再慢慢跟大家交流吧~

作为一前端个新人，也是初次写博客，肯定会有很多分析不到位的地方，小妹先提前谢谢各位前辈的批评指正。天色已晚，祝大家晚安~