關於JS 事件冒泡和onclick,click,on()事件觸發順序

今天在給JQgrid中的標簽添加click事件的時候，發現一個問題。

JQgrid的table中，點擊任何位置，都會勾選點擊行的checkbox，而我希望在點擊我的標簽的時候，不要勾選checkbox。

查看JQgrid源碼，發現它的click事件是綁定到了table上，然后判斷事件點擊目標，找到選中行給它勾選；而我的click事件是綁定到td里面的div中。

按照事件冒泡的觸發順序，應該是我的事件先觸發，之后是JQgrid的事件。

結果不是這樣的。我發現JQgrid使用$().click(function(){})綁定的事件，而我使用$("body").on("click","",function(){})綁定的事件。

我希望比較一下它們的差別，專門寫了一下代碼，查看運行結果。

 

代碼如下：

<div id="div_2" onclick="console.error('onclick_2')">
	<div id="div_1" onclick="console.error('onclick_1')">
		Click this Div
	</div>
</div>

JS：

	$(function(){
		$("body").on("click","#div_2",function(){
			console.error("on bind click 2");
		});
		$("body").on("click","#div_1",function(){
			console.error("on bind click 1");
		});
		$("#div_2").click(function(){
			console.error("click 2");
		});
		$("#div_1").click(function(){
			console.error("click 1");
		});
	});

執行結果：

得到結論：

onclick,click,on()的優先關系：onclick>click>on()；

onclick和click綁定的事件，彼此之間遵守事件冒泡規則，從內到外觸發；

on()綁定的事件，總是晚於onclick和click綁定的事件觸發；

由此可以得到，使用on()綁定的事件與onclick和click綁定的事件，判斷觸發先后順序時，不能只考慮事件冒泡規則。