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的区别

然后就不再弹窗。可以看出来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的区别

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

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

stopPropagation阻止事件传播，但是却无法阻止同一个层级元素后续事件的传播，上述例子中在第二个事件添加了stopPropagation，父级元素事件不再传播，但是同级别的元素P第三次事件还是触发了。
stopImmediatePropagation不管同级与否，但凡添加了，后续或者父级元素的事件都阻止了，体现出了Immediate的意义