jQuery綁定事件on和bind的區別詳解

jQuery幾種綁定事件，以下：

//對於給ul的子元素li的綁定方法

//方法一：

$("ul li").bind("click",function(){console.log($(this))});

//方法二：
$("ul li").on("click",function(){console.log($(this))});

//方法三 【推薦】

$("ul").on("click","li",function(){console.log($(this))});

//方法四 【推薦】
$("li").parent("ul").on("click",function(){console.log($(this))});

以上四種方法都是對ul下的li進行綁定

其中方法一和方法二徹底同樣，做用是：給ul下已經存在的li添加綁定事件，方法綁定在了li上，一旦出現新的li，點擊方法是沒法綁定在新的li上的(沒法給動態添加的li元素添加綁定事件)。
由於綁定方法已經完成，任務分發到各個li上，由li對點擊後的方法進行操做。此時添加li是沒法再次運行綁定事件的。若是強制再次運行一次綁定，則出現的結果是：已經綁定過的li被重複綁定，當li被點擊後會重複兩次console.log()事件。

第三種和第四種方法正好解決這個綁定問題，不同的是：這兩種綁定方法是給ul進行綁定，至關於li被點擊後，由ul分配須要運行的方法，此方法只須要綁定一次，不須要循環便可對ul下全部的li進行時間綁定。再添加新的li後，不須要對li有任何綁定操做，由於事件在li被點擊後纔開始進行的。

對於取消重複綁定，bind還有另外一種方法，以下：

//方法五：

$("ul li").unbind("click").bind("click",function(){console.log($(this))});

對於事件綁定推薦使用方法三和方法四，優勢是：能夠對元素動態綁定，運行速度快，效率高。