关于jQuery新的事件绑定机制on()的使用技巧

转载  发布时间:2013年04月26日 10:41:43   作者:   我要评论

本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧。需要的朋友参考下

今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定。因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。

on(events,[selector],[data],fn)

events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素,事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

替换bind()

当第二个参数'selector'为null时,on()和bind()其实在用法上基本上没有任何区别了,所以我们可以认为on()只是比bind()多了一个可选的'selector'参数,所以on()可以非常方便的换掉bind()

替换live()

在1.4之前相信大家非常喜欢使用live(),因为它可以把事件绑定到当前以及以后添加的元素上面,当然在1.4之后delegate()也可以做类似的事情了。live()的原理很简单,它是通过document进行事件委派的,因此我们也可以使用on()通过将事件绑定到document来达到live()一样的效果。

live()写法

复制代码 代码如下:

 $('#list li').live('click', '#list li', function() {
    //function code here.
});

on()写法
复制代码 代码如下:

$(document).on('click', '#list li', function() {
    //function code here.
});

这里的关键就是第二个参数'selector'在起作用了。它是一个过滤器的作用,只有被选中元素的后代元素才会触发事件。

替换delegate()
delegate()是1.4引入的,目的是通过祖先元素来代理委派后代元素的事件绑定问题,某种程度上和live()优点相似。只不过live()是通过document元素委派,而delegate则可以是任意的祖先节点。使用on()实现代理的写法和delegate()基本一致。

delegate()的写法

复制代码 代码如下:

$('#list').delegate('li', 'click', function() {
    //function code here.
});

on()写法
复制代码 代码如下:

$('#list').on('click', 'li', function() {
    //function code here.
});

貌似第一个和第二个参数的顺序颠倒了一下,别的基本一样。

总结
jQuery推出on()的目的有2个,一是为了统一接口,二是为了提高性能,所以从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live()了,因为它已经处于不推荐使用列表了,随时会被干掉。如果只绑定一次事件,那接着用one()吧,这个没有变化。

相关文章

  • jQuery ajax读取本地json文件的实例

    jQuery ajax读取本地json文件的实例

    下面小编就为大家带来一篇jQuery ajax读取本地json文件的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 基于Jquery实现的一个图片滚动切换

    基于Jquery实现的一个图片滚动切换

    很多效果还是要封装成插件才好,这里只是给大家个效果参考。对像我这种新手应该还是有帮助的吧
    2012-06-06
  • 30个最好的jQuery 灯箱插件分享

    30个最好的jQuery 灯箱插件分享

    下面介绍30个最好的jQuery Lightbox 插件,别忘了收藏它,以防未来的设计中错过它们中的一个。
    2011-04-04
  • jQuery EasyUI右键菜单实现关闭标签/选项卡

    jQuery EasyUI右键菜单实现关闭标签/选项卡

    这篇文章主要介绍了jQuery EasyUI右键菜单实现关闭标签/选项卡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • jQuery的12招常用技巧分享

    jQuery的12招常用技巧分享

    jquery是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器。由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。
    2011-08-08
  • jquery使用淘宝接口跨域查询手机号码归属地实例

    jquery使用淘宝接口跨域查询手机号码归属地实例

    这篇文章主要介绍了jquery使用淘宝接口跨域查询手机号码归属地的方法,大家参考使用吧
    2013-11-11
  • jQuery中:eq()选择器用法实例

    jQuery中:eq()选择器用法实例

    这篇文章主要介绍了jQuery中:eq()选择器用法,实例分析了:eq()选择器的功能、定义及匹配指定索引值元素时的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • 基于jQuery的js分页代码

    基于jQuery的js分页代码

    jquery的分页代码,是结合数据库实现的, 这里只给出核心jquery代码。其它的大家可以发挥下。
    2010-06-06
  • jQuery ajax应用总结

    jQuery ajax应用总结

    Ajax在Web应用中的作用越来越大,许多工具都包含了对这一功能的使用,以下是对这些常用工具中Ajax的典型实例.
    2016-06-06
  • jquery实现将获取的颜色值转换为十六进制形式的方法

    jquery实现将获取的颜色值转换为十六进制形式的方法

    这篇文章主要介绍了jquery实现将获取的颜色值转换为十六进制形式的方法,包含了完整的实例与关键代码的注释说明,并附带了所需知识点的参考文章地址,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12

最新评论