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

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

.

相关推荐