click、onclick、on事件执行优先级

按照事件冒泡的触发顺序，应该是我的事件先触发

结果不是这样的。我发现使用$().click(function(){})绑定的事件，而我使用$("body").on("click","",function(){})绑定的事件。

我希望比较一下它们的差别，专门写了一下代码，查看运行结果。

 

代码如下：

1 2 3 4 5

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

JS：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$( 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绑定的事件，判断触发先后顺序时，不能只考虑事件冒泡规则。