姿势最重要:JS中如何巧用事件委托

什么是事件委托呢？通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。

推荐下我的前端群：524262608，不管你是小白还是大牛，小编我都挺欢迎，不定期分享干货，包括我自己整理的一份2017最新的前端资料和零基础入门教程，欢迎初学和进阶中的小伙伴。

我们在工作中有个常见的场景：页面有多个相同的按钮需要绑定同样的事件逻辑。

如下HTML，实现：点击每个按钮，当它的 data-id不为null的时候输出它的data-id(实际业务中会有更复杂的逻辑)

<ul id="parent">
<li class="btn" data-id="1">按鈕1</li>
<li class="btn" data-id="2">按鈕2</li>
<li class="btn" data-id="null">按鈕3</li>
<li class="btn" data-id="3">按鈕4</li>
<li class="btn" data-id="null">按鈕5</li>
</ul>

实现方案一：(缺点 1 for循环影响性能，2每次循环都会在内部创建一个事件，3 如果 li 是动态追加的会导致事件失效。)

var btns=document.getElementsByClassName("btn");//扩展 可以有多种获取DOM方法for(var i=0;i<btns.length;i++){
btns[i].onclick=function(){ var id=this.getAttribute("data-id"); if(id!="null"){ console.log(id);
}
}
}

实现方案二：(解决了方案一种的2,3缺点，但是还有for循环！IOS下事件委托失效解决方案)

var btns=document.getElementsByClassName("btn");function handleClick(){
 var id=this.getAttribute("data-id");
 if(id!="null"){ console.log(id);
}
}for(var i=0;i<btns.length;i++){
btns[i].addEventListener("click",handleClick,false);
}

实现方案三：（完美解决方案1种的所有缺点）

涉及知识点：addEventListener，event

var parent=document.getElementById("parent");function handleClick(){
 var e=window.event||arguments[0]; var target=e.srcElement||e.target;
 if(target.nodeName.toLowerCase() == 'li'){
 var id=target.getAttribute("data-id");
 if(id!="null"){
 console.log(id);
}
}
}
parent.addEventListener("click",handleClick,false);

方案三的升级版：注册绑定事件方便复用

// 1、通用綁定事件function bind(elem,eventType,callback){ if(elem.addEventListener){
elem.addEventListener(eventType,callback,false);
}else{
elem.attachEvent("on"+eventType,function(){
callback.call(elem);
});
}
}var parent=document.getElementById("parent");function handleClick(){ var e=window.event||arguments[0]; var target=e.srcElement||e.target; if(target.nodeName.toLowerCase() == 'li'){ var id=target.getAttribute("data-id"); if(id!="null"){ console.log(id);
}
}
}
bind(parent,"click",handleClick);