资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/JS事件流和事件委托

JS事件流和事件委托

W_BinaryTree / 495人阅读

摘要：那什么是事件冒泡呢概念请自行百度，直接上图。，不支持事件捕获只支持事件冒泡。即本不该被触发的事件被绑定上了事件。

在上一篇《JS知识点大杂烩》中说到了事件流但没有详细的介绍，这篇文章就来介绍一下事件流。

事件流一共由三个阶段分别是：

1.捕获阶段
2.目标阶段
3.冒泡阶段

事件绑定大家都知道，有DOM0级（on+type）和DOM2级（addEventListener）,我觉得说那么多概念不好理解，直接看代码吧,为了方便我就直接使用id来获取元素。

DOM0级


box1.onclick = function(){
    console.log("box1");
}

输出了box1这个我们都知道，再来看一下。


box1.onclick = function(){
    console.log("box1");
}
box1.onclick = function(){
    console.log("box1 two");
}

输出了box1 two,因为DOM0级会覆盖掉之前在同一元素上面的绑定，再来看一下。


    

        

    



box1.onclick = function(){
    console.log("box1");
}
box2.onclick = function(){
    console.log("box2");
}
box3.onclick = function(){
    console.log("box3");
}


当我们点击box1时都知道输出box1，可是当我们点击box3时弹出什么呢？


你可能会感觉奇怪，为什么我点击的box3怎么其他的也会触发？因为事件冒泡。那什么是事件冒泡呢？概念请自行百度，直接上图。


这就叫做事件冒泡，一级一级往上冒直到window这里我没有画出来。DOM0级只支持冒泡阶段。

DOM2级


    

        

    



box1.addEventListener("click", function(){
    console.log("box1");
},false);
box2.addEventListener("click", function(){
    console.log("box2");
},false);
box3.addEventListener("click", function(){
    console.log("box3");
},false);

输出跟上面是一样的，因为我们绑定在了冒泡阶段。（true捕获，false冒泡）。
我们再来看看捕获阶段是怎么样的


    

        

    



box1.addEventListener("click", function(){
    console.log("box1");
},true);
box2.addEventListener("click", function(){
    console.log("box2");
},true);
box3.addEventListener("click", function(){
    console.log("box3");
},true);

我们点击box3看到

你可能会发现顺序反过来了，那这是为什么呢？因为事件捕获，那什么是时间捕获呢？概念请自行百度，直接上图。


这就是捕获阶段，跟冒泡阶段完全相反。

那冒泡跟捕获的执行顺序是什么样的呢？我分别在每一个元素上绑定了两个阶段的同一事件，我们来看看触发的顺序。


    

        

    



box1.addEventListener("click", function(){
    console.log("box1 捕获阶段");
},true);
box2.addEventListener("click", function(){
    console.log("box2 捕获阶段");
},true);
box3.addEventListener("click", function(){
    console.log("box3 捕获阶段");
},true);
box1.addEventListener("click", function(){
    console.log("box1 冒泡阶段");
},false);
box2.addEventListener("click", function(){
    console.log("box2 冒泡阶段");
},false);
box3.addEventListener("click", function(){
    console.log("box3 冒泡阶段");
},false);

我们点击box3看到，先捕获后冒泡。

那是不是都这样呢？我们稍微改动一下。

box1.addEventListener("click", function(){
    console.log("box1 捕获阶段");
},true);
box2.addEventListener("click", function(){
    console.log("box2 捕获阶段");
},true);
box1.addEventListener("click", function(){
    console.log("box1 冒泡阶段");
},false);
box2.addEventListener("click", function(){
    console.log("box2 冒泡阶段");
},false);
box3.addEventListener("click", function(){
    console.log("box3 冒泡阶段");
},false);
box3.addEventListener("click", function(){
    console.log("box3 捕获阶段");
},true);  // 将box3的捕获阶段放到box3的冒泡阶段后面

看看触发的顺序是不是还一样呢？


发现反过来了，其实这就叫做目标阶段吧。在你触发事件的目标元素身上不区分冒泡捕获，按绑定的顺序来执行。

我们用图来看一下。


这样是不是太简单我们来一点复杂的。


    

        

    



box1.addEventListener("click", function(){
    console.log("box1 捕获阶段");
},true);
box2.addEventListener("click", function(){
    console.log("box2 捕获阶段");
},true);
box3.addEventListener("click", function(){
    console.log("box3 捕获阶段");
},true); 
box1.addEventListener("click", function(){
    console.log("box1 冒泡阶段");
},false);
box2.addEventListener("click", function(){
    console.log("box2 冒泡阶段");
},false);
box3.addEventListener("click", function(){
    console.log("box3 冒泡阶段");
},false);
box1.onclick = function () {
    console.log("box1 51561");
}
box2.onclick = function () {
    console.log("box2");
}
box3.onclick = function () {
    console.log("box3");
}
box1.onclick = function () {
    console.log("box1");
}

触发顺序是什么样的？（我觉得你最好先自己把答案写出来）

看看你答对了没有

这样会不会太简单，换一下顺序

box1.onclick = function () {
    console.log("box1 51561");
}
box2.onclick = function () {
    console.log("box2");
}
box3.onclick = function () {
    console.log("box3");
}
box1.onclick = function () {
    console.log("box1");
}
box1.addEventListener("click", function(){
    console.log("box1 捕获阶段");
},true);
box2.addEventListener("click", function(){
    console.log("box2 捕获阶段");
},true);
box1.addEventListener("click", function(){
    console.log("box1 冒泡阶段");
},false);
box2.addEventListener("click", function(){
    console.log("box2 冒泡阶段");
},false);
box3.addEventListener("click", function(){
    console.log("box3 冒泡阶段");
},false);
box3.addEventListener("click", function(){
    console.log("box3 捕获阶段");
},true);


答对了吗？

再说一下冒泡和捕获


    

        

    



box1.onclick = function () {
    console.log("box1 51561");
}
box2.onclick = function () {
    console.log("box2");
}
box3.onclick = function () {
    console.log("box3");
}
box1.onclick = function () {
    console.log("box1");
}
box1.addEventListener("click", function(){
    console.log("box1 捕获阶段");
},true);
box2.addEventListener("click", function(){
    console.log("box2 捕获阶段");
},true);
box1.addEventListener("click", function(){
    console.log("box1 冒泡阶段");
},false);
box2.addEventListener("click", function(){
    console.log("box2 冒泡阶段");
},false);
box3.addEventListener("click", function(){
    console.log("box3 冒泡阶段");
},false);
box3.addEventListener("click", function(){
    console.log("box3 捕获阶段");
},true);


你说这样点击会输出什么？你是不是犹豫了？说明你还是不懂冒泡和捕获。

不要让你看到的骗了你，冒泡是DOM结构的父子关系而不是看起来是不是包裹的关系。（答案同上面）。

忘了IE了，说一下IE的事件机制。

IE上面不支持addEventListener但是它有attachEvent

box1.onclick = function () {
    console.log("box1 51561");
}
box2.onclick = function () {
    console.log("box2");
}
box3.onclick = function () {
    console.log("box3");
}
box1.onclick = function () {
    console.log("box1");
}
box1.attachEvent("onclick", function (){
    console.log("box1 attachEvent")
})
box2.attachEvent("onclick", function (){
    console.log("box2 attachEvent")
})
box3.attachEvent("onclick", function (){
    console.log("box3 attachEvent")
})

box1.attachEvent("onclick", function (){
    console.log("box1")
})
box1.attachEvent("onclick", function (){
    console.log("box2")
})
box1.attachEvent("onclick", function (){
    console.log("box3")
})

这个会输出什么？（提示：不会覆盖）
答案是：box1 box2 box3
哈哈，开玩笑啊。


是不是很奇怪，IE中该事件是先绑定的后输出。IE6、7、8，不支持事件捕获只支持事件冒泡。

阻止事件冒泡兼容

我们先来说一下不支持冒泡的事件：blur、focus、mouseenter、mouseleave。（我就知道这些）
还是这个例子，我们看一下阻止冒泡。

box1.onclick = function (){
    console.log("box1")
}
box2.onclick = function (){
    console.log("box2")
}
box3.onclick = function (e){
    e.stopPropagation();
    console.log("box3")
}

只输出了box3.
虽然阻止了冒泡但在IE8及以下是不好使的，我们看一下兼容的写法。

function stopPropagate(e){
    var event = e || window.event;
    if(event.stopPropagation){
        event.stopPropagation();
    }else if(event.cancelBubble){ //IE
        event.cancelBubble = true;
    }
}

阻止默认事件兼容

function preventDef(e){
    var g = e || window.event;
    if(g.preventDefault){
        g.preventDefault();
    }else if(g.returnValue){
        g.returnValue = false;
    }
    return false;
}

我们再来看看事件绑定的this指向

box1.onclick = function (){
    console.log("onclick", this);
}
box1.addEventListener("click",function () {
    console.log("addEventListener", this);
}, false)


IE6、7、8，事件绑定的this指向

box1.attachEvent("onclick",function () {
    console.log("attachEvent", this);
})

attachEvent [object Window]

我们发现，IE6、7、8 this指向window

扩展 事件委托

    
    
  • 1
    • 
    
  • 2
    • 
    
  • 3
    •

如果我们要监听每一个li的行为，你会不会这么做。

let li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
    li.onclick = ()=>{
        console.log(i);
    }
}

评论区有位大佬指出了我的错误，因为这样形成了闭包，得不到输出的结果。因为当时只想演示事件委托没有注意到这个情况，在此为读者们表示深深的歉意。下面是更改之后的，之所以不把错误的修改是想告诫自己还有和我犯同样错误的人。

let li = document.getElementsByTagName("li");
//ES6 
for (let i = 0; i < li.length; i++) {
    li[i].onclick = ()=>{
        console.log(i);
    }
}
//IIFE（1）
for (var i = 0; i < li.length; i++) {
    (function(j){
        li[j].onclick = ()=>{
        console.log(j);
    }})(i)
}
//IIFE（2）
for (var i = 0; i < li.length; i++) {
    li[i].onclick = (function(j){
        return ()=>{
            console.log(j);
        }
    })(i);
}

这样做是对的单不够好，要是再加几个li或有很多的100|1000个li你还这样做是不是感觉就不好了。我们就需要为每一个li注册事件，麻烦不说，注册很多事件就不好。那么我们怎么办的，使用事件委托，就是把你的事件委托给别人（父级），利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

我们来看一下。

ul.onclick = function (e){
    console.log(e.target);
}

这就是事件委托。

优点：

可以大量节省内存占用，减少事件注册。

可以实现当新增子对象时，无需再对其进行事件绑定，对于动态内容部分尤为合适

缺点：

事件代理的常用应用应该仅限于上述需求，如果把所有事件都用事件代理，可能会出现事件误判。即本不该被触发的事件被绑定上了事件。

超融合服务器 云服务器 js事件委托 什么是js 事件委托 委托事件 事件委托

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

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

相关文章

  • javascript 之 事件篇

    摘要：处于目标阶段事件在上发生并处理。冒泡阶段事件又传播回文档。不支持捕获事件的。总结二使用事件委托新添加的元素还会有之前的事件。事件对象在触发某个事件时，会产生一个事件对象。 js 是采用异步事件驱动的机制来响应用户操作的，也就是说当用户对某个html元素进行操作的时候，会产生一个事件，该事件会驱动某些函数来处理。事件源：产生事件的地方（html元素，窗口，其他等等)；事件：鼠标事件，键盘...

    Forest10 评论0 收藏0

  • JavaScript系列之事件详解

    摘要：响应某个事件的函数就叫事件处理程序或事件侦听器。为事件指定事件处理程序的方法主要有种。事件处理程序事件直接加在元素上。事件委托利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果，解决事件处理程序过多问题。事件委托优点提高性能。 JavaScript简单入门可以看看我丑丑的Github博客JavaScript简单入门 事件 JavaScript与HTML之间的交互是通过事件实现的...

    pakolagij 评论0 收藏0

  • js中的事件流和事件处理程序

    摘要：事件流描述的是从页面中接受事件的顺序。事件流中的事件流是事件冒泡流。顺序是从外向里级事件规定的事件流包括三个阶段事件捕获阶段处于目标阶段和事件冒泡阶段，其中到是处于目标阶段，如图所示。添加的事件会被逆序执行。 HTML和js之间的交互是通过事件实现的。 事件流描述的是从页面中接受事件的顺序。 事件流 IE中的事件流是事件冒泡流。顺序是从里向外 eg：div-body-html-...

    forsigner 评论0 收藏0

发表评论

登陆后可评论

0条评论

W_BinaryTree

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<