chaihongjun.me

JavaScript事件对象中stopImmediatePropagation和stopPropagation的区别

JavaScript事件对象中stopImmediatePropagation和stopPropagation的区别

从字面上看stopImmediatePropagation比stopPropagation执行的似乎更快。实际上是不是这么理解呢?来两段demo对比一下:

<!DOCTYPE html><html>
    <head>
        <style>
            p { height: 30px; width: 150px; background-color: #ccf; }
            div {height: 30px; width: 150px; background-color: #cfc; }
        </style>
    </head>
    <body>
        <div>
            <p>paragraph</p>
        </div>
        <script>
            document.querySelector("p").addEventListener("click", function(event)
            {
                alert("我是p元素上被绑定的第一个监听函数");
            }, false);
            document.querySelector("p").addEventListener("click", function(event)
            {
                alert("我是p元素上被绑定的第二个监听函数");
                //执行stopImmediatePropagation方法
                 event.stopImmediatePropagation();
            }, false);
            document.querySelector("p").addEventListener("click", function(event)
            {
                alert("我是p元素上被绑定的第三个监听函数");
            }, false);
            document.querySelector("div").addEventListener("click", function(event)
            {
                alert("我是div元素,我是p元素的上层元素");
            }, false);
        </script>
    </body></html>

这段代码是在P元素的第二个点击事件弹窗之后引入stopImmediatePropagation属性,当我们点击P的结果是顺序弹窗

 

JavaScript事件对象中stopImmediatePropagation和stopPropagation的区别

JavaScript事件对象中stopImmediatePropagation和stopPropagation的区别

然后就不再弹窗。可以看出来P元素第三个点击事件和P元素的父元素DIV的事件都没有触发。现在我们改一下将stopImmediatePropagation改成stopPropagation

<!DOCTYPE html>
<html>
	<head>
		<style>
			p {
				height: 30px;
				width: 150px;
				background-color: #ccf;
			}
			div {
				height: 30px;
				width: 150px;
				background-color: #cfc;
			}
		</style>
	</head>
	<body>
		<div>
			<p>paragraph
			</p>
		</div>
		<script>
			document.querySelector("p").addEventListener("click", function(event)
														 {
				alert("我是p元素上被绑定的第一个监听函数");
			}
														 , false);
			document.querySelector("p").addEventListener("click", function(event)
														 {
				alert("我是p元素上被绑定的第二个监听函数");
				//执行stopPropagation方法
				event.stopPropagation();
			}
														 , false);
			document.querySelector("p").addEventListener("click", function(event)
														 {
				alert("我是p元素上被绑定的第三个监听函数");
			}
														 , false);
			document.querySelector("div").addEventListener("click", function(event)
														   {
				alert("我是div元素,我是p元素的上层元素");
			}
														   , false);
		</script>
	</body>
</html>

再看看测试结果:

JavaScript事件对象中stopImmediatePropagation和stopPropagation的区别

JavaScript事件对象中stopImmediatePropagation和stopPropagation的区别

JavaScript事件对象中stopImmediatePropagation和stopPropagation的区别

发现这次P的三个事件都发生了,但是P的父元素事件没发生。

Propagation字面意思是传播蔓延扩展等等,自然而然stopPropagation和stopImmediatePropagation都有停止阻止(事件)传播的意思。再结合前面的例子可以看出它们的区别:

  1. stopPropagation阻止事件传播,但是却无法阻止同一个层级元素后续事件的传播,上述例子中在第二个事件添加了stopPropagation,父级元素事件不再传播,但是同级别的元素P第三次事件还是触发了。

  2. stopImmediatePropagation不管同级与否,但凡添加了,后续或者父级元素的事件都阻止了,体现出了Immediate的意义

 

 

知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:柴宏俊»