我所理解的JavaScript 事件委托

vvpvvp 发布于2019-08-23 15:43 / 251人阅读

摘要：当初学时，学到委托概念的时候，有点不知所措，在工作后运用了很多后才发现真的好用。事件的冒泡，所以才可以在父元素来监听子元素触发的事件。事件的冒泡这个要讲一下，在的时候我们可以设置事件模型事件冒泡事件捕获，一般来说都是用事件冒泡的模型。

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

事件委托的原理

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

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

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

事件委托的优缺点

优点

减少内存消耗

动态绑定事件

缺点
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 鼠标操作之类的事件，尽管有事件冒泡，但是现在的方案都是去不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的；**

云服务器私有云 javascript事件委托委托事件事件委托事件委托c

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102497.html

我所理解的JavaScript 事件委托

摘要：当初学时，学到委托概念的时候，有点不知所措，在工作后运用了很多后才发现真的好用。事件的冒泡，所以才可以在父元素来监听子元素触发的事件。事件的冒泡这个要讲一下，在的时候我们可以设置事件模型事件冒泡事件捕获，一般来说都是用事件冒泡的模型。当初学C#时，学到委托概念的时候，有点不知所措，在工作后运用了很多后才发现真的好用。在JavaScript里面也有事件委托的概念，那在JavaScrip...

wushuiyong 2019-08-02 14:26 评论0 收藏0
又被事件冒泡坑了一把，这次要彻底弄懂浏览器的事件流

摘要：事件冒泡一个简单，但是坑了我无数回的知识点与的交互通过事件来实现。而浏览器的事件流是一个非常重要的概念。不去讨论那些古老的浏览器有事件捕获与事件冒泡的争议，只需要知道在中规定的事件流包括了三个部分，事件捕获阶段处于目标阶段事件冒泡阶段。打算封装一个弹窗组件，做的时候忘记了考虑事件冒泡的因素，结果被坑得不要不要的。为了解决自己的问题，去查阅了不少资料，把事件流相关的知识都给总结一下。 ...

Ocean 2019-08-19 18:33 评论0 收藏0
又被事件冒泡坑了一把，这次要彻底弄懂浏览器的事件流

摘要：事件冒泡一个简单，但是坑了我无数回的知识点与的交互通过事件来实现。而浏览器的事件流是一个非常重要的概念。不去讨论那些古老的浏览器有事件捕获与事件冒泡的争议，只需要知道在中规定的事件流包括了三个部分，事件捕获阶段处于目标阶段事件冒泡阶段。打算封装一个弹窗组件，做的时候忘记了考虑事件冒泡的因素，结果被坑得不要不要的。为了解决自己的问题，去查阅了不少资料，把事件流相关的知识都给总结一下。 ...

CodeSheep 2019-08-05 17:49 评论0 收藏0
又被事件冒泡坑了一把，这次要彻底弄懂浏览器的事件流

摘要：事件冒泡一个简单，但是坑了我无数回的知识点与的交互通过事件来实现。而浏览器的事件流是一个非常重要的概念。不去讨论那些古老的浏览器有事件捕获与事件冒泡的争议，只需要知道在中规定的事件流包括了三个部分，事件捕获阶段处于目标阶段事件冒泡阶段。打算封装一个弹窗组件，做的时候忘记了考虑事件冒泡的因素，结果被坑得不要不要的。为了解决自己的问题，去查阅了不少资料，把事件流相关的知识都给总结一下。 ...

TIGERB 2019-08-01 15:22 评论0 收藏0
【译】JavaScript面试问题：事件委托和this

摘要：主题来自于的典型面试问题列表。有多种方法来处理事件委托。这种方法的缺点是父容器的侦听器可能需要检查事件来选择正确的操作，而元素本身不会是一个监听器。 showImg(http://fw008950-flywheel.netdna-ssl.com/wp-content/uploads/2014/11/Get-Hired-Fast-How-to-Job-Search-Classifieds...

浠ラ箍 2019-08-21 10:32 评论0 收藏0