js中.stopPropagation()和.stopImmediatePropagation()的区别

最新推荐文章于 2022-09-02 23:02:37 发布

ckx_cxy

最新推荐文章于 2022-09-02 23:02:37 发布

阅读量4.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： WEB前端 js

本文链接：https://blog.youkuaiyun.com/ckxkobe/article/details/84820805

WEB前端同时被 2 个专栏收录

31 篇文章

订阅专栏

20 篇文章

订阅专栏

js中stopPropagation和stopImmediatePropagation的区别

先上结论：
.stopPropagation(),会阻止事件继续分发到其他document节点,但是当前节点绑定的多个事件会继续按注册的顺序执行
.stopImmediatePropagation(),不仅阻止事件继续分发到其他document,还会将事件分发就地停止,在当前事件之后注册的其他事件,都不会执行

验证：

<div id="dv1">
    <div id="dv2">
        <div id="dv3"></div>
    </div>
</div>

// stopPropagation()和stopImmediatePropagation()的区别
	function my$(id) {
	    return document.getElementById(id);
	}
    my$("dv1").addEventListener("click", function (e) {
        console.log("dv1");

    }, false);
    my$("dv2").addEventListener("click", function (e) {
        console.log("dv2");

    }, false);
    my$("dv3").addEventListener("click", function (e) {
        console.log("dv3t1"+"----------"+event.eventPhase);
        // e.stopImmediatePropagation();
        // e.stopPropagation();
    }, true);
    my$("dv3").addEventListener("click", function (e) {
        console.log("dv3t2"+"----------"+event.eventPhase);
        // e.stopPropagation();//会执行完所有的"dv3"所注册的事件
        e.stopImmediatePropagation();// 在这之下的"dv3"的事件不会执行
    }, true);
    my$("dv3").addEventListener("click", function (e) {
        console.log("dv3f1"+"----------"+event.eventPhase);
    }, false);
    my$("dv3").addEventListener("click", function (e) {
        console.log("dv3f2"+"----------"+event.eventPhase);
    }, false);

几点补充

/**
     * 在同一个节点的同一个事件阶段,有多个事件待处理,那么会按照注册的顺序执行
     * 在目标阶段,同一个节点,有多个事件处理函数要执行,这时候不管是true(捕获)还是false(冒泡),都会按照事件注册顺序执行
     *
     * .stopPropagation(),会阻止事件继续分发到其他document节点,但是当前节点绑定的多个事件会继续按注册的顺序执行
     * .stopImmediatePropagation(),不仅阻止事件继续分发到其他document,还会将事件分发就地停止,在当前事件之后注册的其他事件,都不会执行
     *
     * IE8的事件,没有捕获阶段,只有目标和冒泡
     * window.cancelBubble = true, 不要理解成整个文档都设置了取消冒泡
     * 在哪个事件使用,就在哪个事件生效
     * 这个属性的设定,和stopPropagation()方法类似,当前节点绑定的多个事件会继续按注册的顺序执行
     * 
     *  
     * 
     * 同一个节点的同一种事件，处于同一个事件阶段，事件处理函数是一样的时候
     * 如果事件处理函数是匿名函数，那么都会处理，因为匿名函数所在空间不同，本质上是不同的
     * 如果是命名函数，那么只会执行一个，因为本质上就是中一个函数
     *
     *
     */