浏览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新的事件绑定机制on()的更多相关文章

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

    关于jQuery新的事件绑定机制on()的使用技巧 http://www.jb51.net/article/36064.htm 本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要 ...

  2. jQuery新的事件绑定机制on()示例应用

    投稿:whsnow 字体:[增加 减小] 类型:转载   从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定,下面通过示例为大家介绍下     ...

  3. jQuery 新添加元素事件绑定无效

    jQuery中事件绑定,大多使用on就足够了. 但是对于新添加的元素 on 的绑定事件 会不起作用. 因为 append 中的 节点是在整个文档加载之后才添加的,页面并不会为未来的元素初始化添加点击事 ...

  4. JQuery的方便之处——宽高设置、坐标值和滚动条+事件绑定机制

    1.元素的宽高 可以通过css来进行设置,例如:$("元素").css({"宽度":"值","高度":"值&q ...

  5. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  6. d3可视化实战04:事件绑定机制

    首先说明,d3支持所有的JS事件——甚至其他代码的自定义事件.这里有一个列表,The MDN Event Reference, 包含了几乎所有浏览器创建的事件类型.大家有需要可以去查看. D3的事件绑 ...

  7. Jquery中的事件命名机制

    来源:aitangyong的专栏 JQuery中的bind()和unbind(),提供了事件的绑定和取消机制,既可以绑定html默认支持的事件,也能够绑定自定义的事件.JQuery支持自定义事件,这显 ...

  8. Jquery中的事件绑定$("#btn").bind("click",function(){ })

    Jquery中的事件绑定:$("#btn").bind("click",function(){  }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...

  9. jQuery 中的事件绑定

    一.事件概念 和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...

随机推荐

  1. Using-jqGrid-s-search-toolbar-with-multiple-filter

    http://www.codeproject.com/Articles/58357/Using-jqGrid-s-search-toolbar-with-multiple-filter

  2. 浅谈Objective-C异常处理

    -----<a href="http://www.itheima.com" target="blank">Java培训.Android培训.iOS培 ...

  3. oracle - redo 损坏或删除处理方法

    OS: Oracle Linux Server release 5.7 DB: Oracle Database 11g Enterprise Edition Release 11.2.0.3.0 - ...

  4. Redo日志

    undo日志有一个潜在的问题,即我们在将书屋改变的所有数据写到磁盘前不能提交该事务.有时,如果让数据库修改暂时只存在于主存中,我们可以节省磁盘IO;只要在崩溃发生时有日志可以恢复,这样做就是安全的. ...

  5. GraphLab面向机器学习的并行框架『针对图数据处理模型』

    最近在做文本处理知识的梳理,关注了CMU提出的GraphLab开源分布式计算系统 这是关于GraphLab的PPT:Distributed GraphLab『 http://cheng-qihang- ...

  6. hdu 4585 Shaolin

    原题链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=46093 #include<algorithm> #in ...

  7. golang的{}初始化

    之前说到Golang中某些类型可以赋值nil, 某些类型不能赋值nil. 不能赋值nil都是initialized value不为nil的类型, 例如: bool int, intN uint, ui ...

  8. python中的各种排序

    #encoding=utf-8 import random from copy import copy def directInsertSort(seq): """ 直接 ...

  9. 使用 RestEasy 和 Apache Tomcat 构建 RESTful Web 服务

    第一次,用这个RestEasy框架,用的时候,总是提示,404的错误,郁闷,呵呵,不过经过努力,终于解决问题,特别留个标记. 关于404的错误,上网找了一大堆,也还不行. 我感觉应该是lib下面架包的 ...

  10. Webservice初接触

    公司用到了Powerbuilder+Webserice的技术,能将数据窗口中对数据库的请求,以SQL语句的形式,发到Webservice中,然后由Webservice完成对数据库的请求,并将结果返回给 ...