stopPropagation與stopImmediatePropagation的區別

之前只知道js裏有個stopPropagation(),不知道還有個stopImmediatePropagation()（本人孤陋寡聞，讓你們笑話了），今天看到有段代碼裏出現了stopImmediatePropagation()這個方法，就研究了一下它的用法以及和stopPropagation()的區別。

它們的共同點：
都是阻止後續的偵聽行爲，即能阻擋掉事件流中事件的冒泡，簡而言之就是讓後面的偵聽都不執行；

不一樣點：
是擁有事件監聽函數的當前的節點是否執行該函數，stopPropagation()方法阻止事件對象移到到另外一個節點上，可是容許當前節點的其餘事件監聽函數執行，而stopImmediatePropagation()方法不只阻止事件從當前節點移動到另外一個節點上，它還不容許當前節點的其餘事件監聽函數執行。

可能上面所述有些拗口，下面舉個例子更有助於理解：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style>
	.contDiv {padding:30px;background:#ccc;}
	.show {background:#666;display:inline-block;height:24px;width:300px;text-align:center;}
	.show a {color:#fff;font:12px/24px arial;text-decoration:none;}
</style>
<div class="contDiv">
	<input type="text" class="testInput" placeholder="請輸入文字" />
	<span class="show"></span>
</div>
<script>
	$(function(){
		$(".testInput").keyup(function(e){
			$(".show").html("<a href='http://www.candoudou.com' title='前端開發' target='_blank'>http://www.candoudou.com</a>");
			//比較註釋和不註釋這一行的區別，stopImmediatePropagation能夠阻止在這以後綁定的事件
			//e.stopImmediatePropagation();
		});
		$(".testInput").keyup(function(e){
			$(".show").html("<a href='http://www.rcttt.com' title='前端開發' target='_blank'>http://www.rcttt.com</a>");
		});
	});
 </script>

stopPropagation是阻止默認事件監聽函數。不是jQuery獨有，阻止默認事件的冒泡，好比監聽了DOM節點和該節點的父節點的事件，默認是事件執行將從裏到外，這就是所謂的冒泡。在IE瀏覽器中能夠使用event.cancelBubble=false來作到，標準瀏覽器使用event.stopPropagation方法。jQuery也把stopPropagation擴展方式到IE上這樣有了一致的方法。