我所理解的JavaScript 事件委托

2024年3月12日 102次阅读 来源: Wayne

当初学C#时，学到委托概念的时候，有点不知所措，在工作后运用了很多后才发现真的好用。在JavaScript里面也有事件委托的概念，那在JavaScript中，事件委托又是什么样的原理以及什么应用场景呢？

事件委托的原理

事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown……）的函数委托到另一个元素；
对一个技术点的了解的更深，就能对这个技术运用的更好。

1：事件的冒泡，所以才可以在父元素来监听子元素触发的事件。
2：DOM的遍历，一个父级元素包含的子元素过多，那么当一个事件被触发时，是否触发了某一种类型的元素呢？

这是事件委托的两个核心，跟事件委托相关的技术点，如果碰到什么问题，都可以在这两个点进行切入，来寻求解决方案。
事件的冒泡这个要讲一下，在 document.addEventListener 的时候我们可以设置事件模型：事件冒泡、事件捕获，一般来说都是用事件冒泡的模型。

事件委托的优缺点

优点

  1. 减少内存消耗
  2. 动态绑定事件

缺点
1 耗费性能

事件委托的应用
使用jQuery

$("父标签").delegate("子标签","click",function(){
      var target = $(event.target);
      console.log(target);
});

或者新版本的

 $("父标签").on("click","子标签",function(){
      var target = $(event.target);
      console.log(target);
});

原生JavaScript

 document.getElementById('父标签').addEventListener('click', function (e) {
      // 兼容性处理
      var event = e || window.event;
      var target = event.target || event.srcElement;
      if (target.nodeName.toLocaleLowerCase === '子标签') {
        console.log('the node is: ', target.innerHTML);
      }
    });

其他需要注意的点

对于父级需要委托的对象可能有多个，需要逐个进行绑定事件；
对于需要绑定的事件类型可能有多个，需要逐个绑定事件；
在执行所绑定的函数的时候需要传入正确的参数以及考虑到 this 关键字的问题；
**另外 事件委托也是有一定局限性的；
比如 focus、blur 这些事件没有事件冒泡机制，所以无法进行委托绑定事件；
而mousemove、mouseout 鼠标操作之类的事件，尽管有事件冒泡，但是现在的方案都是去不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的；**

    原文作者：Wayne
    原文地址: https://segmentfault.com/a/1190000018424640
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞