原理:
事件委托就是基于js的事件流产生的,事件委托是利用事件冒泡,将事件加在父元素或者祖先元素上,触发该事件。
<body>
<div id="myDiv">
<input type="button" value="按钮1" id="btn1">
<input type="button" value="按钮2" id="btn2">
<input type="button" value="按钮3" id="btn3">
</div>
</body>
<script type="text/javascript">
document.getElementById("myDiv").onclick=function(e){
e=window.event||e;
var btnId=e.target.id;
switch(btnId){
case "btn1":
console.log("按钮1");
break;
case "btn2":
console.log("按钮2");
break;
case "btn3":
console.log("按钮3");
break;
}
}
</script>
使用场景
很多商品放在一个ul下面的li标签里面,点击添加或删除商品,就可以绑定商品的父元素ul标签,通过事件代理去找到要点击的商品,完成添加删除事件
为什么要使用
1、绑定事件太多,浏览器占用内存变大,严重影响性能
2、Ajax出现,局部刷新盛行,每次加载完,都要重新绑定事件
3、部分浏览器移除元素时,绑定的事件没有被及时移除,导致内存泄漏,严重影响性能
4、Ajax中重复绑定,导致代码耦合性过大,影响后期维护
什么时候使用
1、只在必须的时候,比如Ajax局部刷新区域
2、绑定层级比较低的时候,不在body上绑定
3、绑定次数较少的时候,把多个事件绑定合并到一次事件委托中,由这个事件委托的回调,来进行分发
提高事件委托性能
降低绑定层级
减少绑定次数