原文出处:
https://blog.csdn.net/sanai_1992/article/details/56289451
对于事件绑定推荐使用方法三,优点是:可以对元素动态绑定,运行速度快,效率高。
如题,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))});