事件委托原理使用场景，如何实现以及实现原理

最新推荐文章于 2022-09-02 20:16:03 发布

꧁薇博꧂

最新推荐文章于 2022-09-02 20:16:03 发布

阅读量534

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/PJW_WYB/article/details/108525298

版权

javaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

原理：

事件委托就是基于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、绑定次数较少的时候，把多个事件绑定合并到一次事件委托中，由这个事件委托的回调，来进行分发

提高事件委托性能

降低绑定层级
减少绑定次数

꧁薇博꧂

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
事件委托原理使用场景，如何实现以及实现原理

原理：事件委托就是基于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">
复制链接

扫一扫