js事件委托详解

GeekQiaQia 发布于2019-08-22 14:56 / 1452人阅读

摘要：先说事件流的事件流分为个阶段捕获目标冒泡。如果是每个都去多带带绑定事件明显不科学，毕竟去拿列表也是毕竟消耗性能的，同时每个事件绑定的回调函数也会占用大量的内存。那如果有动态插入的元素呢于是委托就可以用上了。

先说事件流

js的事件流分为3个阶段：捕获、目标、冒泡。即事件来了，先从上到下传播（捕获），到达目标节点（目标），然后在往上传播（冒泡）。看下图：

我们可以在绑定事件的时候指定指是在哪个阶段触发事件，element.addEventListener(event, function, useCapture)，useCapture默认为false，即默认在冒泡阶段触发事件，来做个测试：

demo长这样：

html:

js：

document.getElementById("wraper").addEventListener("click",function(e){
    console.log("wraper")
},false)

document.getElementById("li3").addEventListener("click",function(e){
    console.log("li3")
},false)

document.getElementsByTagName("span")[0].addEventListener("click",function(){
    console.log("span")
},false)

可以看到，这里全是在冒泡阶段触发事件，因此结果为：span li3 wraper 这样的顺序（从下到上），以此类推，如果全部设置为捕获阶段触发事件呢？顺序肯定就反过来了，继续看下面：

document.getElementById("wraper").addEventListener("click",function(e){
    console.log("wraper")
},true)

document.getElementById("li3").addEventListener("click",function(e){
    console.log("li3")
},true)

document.getElementsByTagName("span")[0].addEventListener("click",function(){
    console.log("span")
},true)

结果为：wraper li3 span
同时还可以测试，某一个事件在捕获阶段是优先触发于冒泡阶段的：

document.getElementById("wraper").addEventListener("click",function(e){
    console.log("wraper")
},false)

document.getElementById("li3").addEventListener("click",function(e){
    console.log("li3")
},true)

document.getElementsByTagName("span")[0].addEventListener("click",function(){
    console.log("span")
},false)

结果为：li3 span wraper

从需求出发

来了这样一个需求：在上面的demo中，要给ul下的每个li绑定一个事件，在点击之后触发。
如果是每个li都去多带带绑定事件？明显不科学，毕竟去拿li列表也是毕竟消耗性能的，同时每个事件绑定的回调函数也会占用大量的内存。
你可能会说，我的元素不多，上面的消耗无所谓。那如果有动态插入的元素呢？
于是委托就可以用上了。

document.getElementById("wraper").addEventListener("click", function (e) {
  var target = e.target
  if (target.nodeName.toLocaleLowerCase() === "li") {
    console.log(target.innerHTML);
  }
});

这里的e.target指的时候鼠标最后点击的元素。在这个demo中，点击深红色的span，e.target就指的是span,如果点击li3且不在红色的span中，那么e.target指li3。
有一个问题就是如果匹配的元素需要更具体一些，比如class为li-test的某个li,就需要做优化处理了。后面专门来一篇文章讲。

云服务器服务器托管 js事件委托什么是js 事件委托 js事件详解委托事件

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

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

js事件详解

摘要：事件流事件流描述的是从页面中接收事件的顺序。其次，必须事先指定所有事件处理程序而导致的访问次数，会延迟整个页面的交互就绪时间。 1.事件流事件流描述的是从页面中接收事件的顺序。 1.1 事件冒泡 IE中的事件流叫做冒泡，即时间最开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点，直到传播到document对象。例： Event Exampple ...

BDEEFE 2019-08-19 17:56 评论0 收藏0
js事件委托详解

摘要：先说事件流的事件流分为个阶段捕获目标冒泡。如果是每个都去单独绑定事件明显不科学，毕竟去拿列表也是毕竟消耗性能的，同时每个事件绑定的回调函数也会占用大量的内存。那如果有动态插入的元素呢于是委托就可以用上了。先说事件流 js的事件流分为3个阶段：捕获、目标、冒泡。即事件来了，先从上到下传播（捕获），到达目标节点（目标），然后在往上传播（冒泡）。看下图： showImg(https://s...

Sleepy 2019-08-01 18:39 评论0 收藏0
jQuery 事件用法详解

摘要：只触发事件解除事件任然会执行自定义事件把多个事件组合起来，或者在特定条件下触发事件，普通的事件绑定是无法满足需要的，可以通过自定义事件来形成组合。 jQuery 事件用法详解简介 jquery 之所以成为最受欢迎的前端库，很大一部分是得益于它的事件具有良好的语义，优秀的兼容性，并且便于管理和扩展。在这里我会介绍 jquery 事件的一些比较基础的用法。实现原理 jquery 事件...

shiina 2019-08-19 18:36 评论0 收藏0
js事件冒泡和事件捕获

摘要：查阅了一些资料之后才知道原来这就是事件冒泡，下面是我对事件冒泡和事件捕获的理解。本文参考文章之事件冒泡详解事件委托及其原理前段时间开发一个小项目的时候遇到一个问题，即给一个元素以及它的父元素绑定了click事件，这个时候我点击这个元素时，父级元素的clik事件也会触发，这显然不符合要求。查阅了一些资料之后才知道原来这就是事件冒泡，下面是我对事件冒泡和事件捕获的理解。事件冒泡：事件从...

SimonMa 2019-08-29 12:33 评论0 收藏0
js事件冒泡和事件捕获

摘要：查阅了一些资料之后才知道原来这就是事件冒泡，下面是我对事件冒泡和事件捕获的理解。本文参考文章之事件冒泡详解事件委托及其原理前段时间开发一个小项目的时候遇到一个问题，即给一个元素以及它的父元素绑定了click事件，这个时候我点击这个元素时，父级元素的clik事件也会触发，这显然不符合要求。查阅了一些资料之后才知道原来这就是事件冒泡，下面是我对事件冒泡和事件捕获的理解。事件冒泡：事件从...

raoyi 2019-08-20 16:25 评论0 收藏0