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

js中stopPropagation和stopImmediatePropagation的区别

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

验证:

// 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()方法类似,当前节点绑定的多个事件会继续按注册的顺序执行
     * 
     *  
     * 
     * 同一个节点的同一种事件,处于同一个事件阶段,事件处理函数是一样的时候
     * 如果事件处理函数是匿名函数,那么都会处理,因为匿名函数所在空间不同,本质上是不同的
     * 如果是命名函数,那么只会执行一个,因为本质上就是中一个函数
     *
     *
     */

相关资料:
https://blog.csdn.net/ckxkobe/article/details/84743487
http://www.w3school.com.cn/jsref/event_stoppropagation.asp
https://developer.mozilla.org/zh-CN/docs/Web/API/Event/stopImmediatePropagation

你可能感兴趣的:(WEB前端,js)