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))});

对于事件绑定推荐使用方法三和方法四，优势是：能够对元素动态绑定，运行速度快，效率高。