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

 

【主体】

以上三种方法都是对ul下的li进行绑定

 

其中方法一和方法二完全一样，作用是：给ul下已经存在的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))
});

对于事件绑定推荐使用方法三，优点是：可以对元素动态绑定，运行速度快，效率高。

 

 

.