jquery绑定事件有几种方式?

jquery绑定事件有4种方式,分别为:bind、live、delegate、on;对应的解除监听的函数分别是unbind、die、undelegate、off。

比较和联系:

1.bind()函数只能针对已经存在的元素进行事件的设置;但是live(),on(),delegate()均支持未来新添加元素的事件设置;

2.bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以

 用来代替live()函数,live()函数在1.9版本已经删除;

3.live()函数和delegate()函数两者类似,但是live()函数在执行速度,灵活性和CSS选择器支持方面较delegate()差些,想了解具体情况,请戳这:http://kb.cnblogs.com/page/94469/

4.bind()支持Jquery所有版本;live()支持jquery1.9-;delegate()支持jquery1.4.2+;on()支持jquery1.7+;

推荐使用.on()方法绑定,原因有两点:

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

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

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},
 
live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},
 
delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
}

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

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

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

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

(事件冒泡参考 http://www.cnblogs.com/webflash/archive/2009/08/23/1552462.html)

普通

$('li').click(function(){
    console.log(this)
});

绑定过程的执行时间

1.png

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

更多web开发相关知识,请查阅 HTML中文网 !!

以上就是jquery绑定事件有几种方式?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » jQuery 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏