如何在项目中使用JS事件委托
- php中世界最好的语言原创
- 2018-06-09 11:53:091470浏览
这次给大家带来如何在项目中使用JS事件委托，在项目中使用JS事件委托的注意事项有哪些，下面就是实战案例，一起来看一下。
在日常中，我们可能会听到事件委托这样的概念，有些同学可能对事件委托已经很了解了，也有些同学可能只是听过事件委托，只是会简单的使用，但是对于事件委托的原理不怎么知道。所以该博文会解释一下原生js的事件委托的原理，为什么会有事件委托，为什么可以这样用事件委托等等问题。
1. js中的事件流
在解析事件委托之前，我们先回顾一下js中的事件流，即冒泡和捕获。
① .冒泡：当下级节点触发某个事件的时候，该事件会逐级向上触发上级节点的同类事件。
② .捕获：和冒泡类似，只不过事件的顺序相反。即是从上级节点传递到下级节点
2. 事件委托原理
事件委托就是基于js的事件流产生的，事件委托是利用事件冒泡，将事件加在父元素或者祖先元素上，触发该事件。
<body>
<p id="myp">
<input type="button" value="按钮1" id="btn1">
<input type="button" value="按钮2" id="btn2">
<input type="button" value="按钮3" id="btn3">
</p>
</body>
<script type="text/javascript">
document.getElementById("myp").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>
上面的代码就是一个典型的事件委托案例。利用的原理就是事件冒泡，将事件加载父元素上，通过event参数来区别按钮的不同
3. 总结
通过对上面事件委托代码的观察，我们可以很容易得出事件委托的好处：
① .减少页面绑定事件数量，由于页面事件绑定数量越多，页面执行性能越差，所以事件委托可以提高页面的性能
② .事件委托可以灵活的处理子节点动态变化的场景，无论子节点增加还是减少，事件都无需重新绑定
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是如何在项目中使用JS事件委托的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn