jQuery on()方法示例及jquery on()方法的优点

前端之家收集整理的这篇文章主要介绍了jQuery on()方法示例及jquery on()方法的优点前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

jQuery on()方法是官方推荐的绑定事件的一个方法

由此扩展开来的几个以前常见的方法有.

bind()

delegate()

live()

以上三种方法

jQuery1.8

之后都不推荐使用,官方在

1.9时

已经取消使用

live()

方法了,所以建议都使用

on()

方法

tip:如果你需要移除on()所绑定的方法,可以使用off()方法处理。

tip:如果你的事件只需要一次的操作,可以使用one()这个方法

trigger()绑定

多个事件绑定同一个函数

SEOver mouSEOut",function(){ $("p").toggleClass("intro"); }); });

多个事件绑定不同函数

SEOver:function(){$("body").css("background-color","lightgray");},mouSEOut:function(){$("body").css("background-color","lightblue");},click:function(){$("body").css("background-color","yellow");} }); });

绑定自定义事件

传递数据到函数

适用于未创建的元素

This is a new paragraph.

").insertAfter("button"); }); });

jQuery绑定事件的方法有几种,推荐使用.on()方法绑定,原因有两点:

1.on()方法可以绑定动态添加页面元素的事件

比如动态添加页面的DOM元素,用.on()方法绑定的事件不需要关心注册该事件的元素何时被添加进来,也不需要重复绑定。有的同学可能习惯于用.bind()、.live()或.delegate(),查看源码就会发现,它们实际上调用的都是.on()方法,并且.live()方法在jQuery1.9版本已经被移除。

移除.on()绑定的事件用.off()方法

2.on()方法绑定事件可以提升效率

很多文章都提到了利用事件冒泡和代理来提升事件绑定的效率,大多都没列出具体的差别,所以为了求证,我做一个小测试。

假设页面添加了5000个li,用chrome开发者工具Profiles测试页面载入时间。

普通绑定(姑且这么称呼它)

绑定过程的执行时间

2013-08-13_190358

普通绑定相当于在5000li上面分别注册click事件,内存占用约4.2M,绑定时间约为72ms。

.on()绑定

绑定过程的执行时间

2013-08-13_191010

.on()绑定利用事件代理,只在document上注册了一个click事件,内存占用约2.2M,绑定时间约为1ms。

以上就是本文的全部内容,希望对大家学习jquery on()方法有所帮助。

原文链接:https://www.f2er.com/jquery/52642.html

猜你在找的jQuery相关文章