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

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

$(elements).on( events [, selector] [, data] , handler );
$(elements).off( [ events ] [, selector] [, handler] );

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

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

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

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

替换bind()

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

$('a').bind('click', myHandler);
$('a').on('click', myHandler);
$(window).unbind('scroll.myPlugin');
$(window).off('scroll.myPlugin');

替换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()吧,这个没有变化。推荐使用on() off().

注:jQuery1.9删除了一些在1.8中已经过时的api

 
jQuery1.9删除了一些在1.8中已经过时的api,想要把那些不够安全的、缺乏效率的、用处不大的,以及带有误导的特性统统去掉。如果你想升级你的jquery版本,但又使用了如下被删除的api的话,可以引入Migrate迁移插件,被删除的api可以在Migrate插件中修复。

.toggle(function, function, … )

toggle()方法可实现点击一个元素来执行指定函数。此方法被删除以减少混乱和提高潜在的模块化程度。

jQuery.browser()

jQuery.browser()通过UA信息来检测浏览器。此方法在1.3版本中已不赞成使用,并在1.9版本中被删除,jquery团队更建议通过特性检测来时您的代码兼容浏览器。

.live()

live()方法可以为未来生成的元素添加事件,此方法在1.7版本中已不赞成使用,并在1.9版本中被删除,您可以使用on()方法来代替。

.die()

die()方法可以移除live()添加的事件,此方法在1.7版本中已不赞成使用,并在1.9版本中被删除,您可以使用off()方法来代替。

.sub()
sub()方法可以可创建一个新的jQuery副本,不影响原有的jQuery对像,但用例的数量已经不足以证明它存在的价值。

关于JQuery的绑定方法的更多相关文章

  1. jQuery事件绑定方法bind、 live、delegate和on的区别

    我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 1.准备知识 当我们在开始的时候,有些知识是必须具备的: 1 ...

  2. 完美的jquery事件绑定方法on()

    在讲on()方法之前,我们先讲讲在on()方法出现前的那些事件绑定方法: .live() jQuery 1.3新增的live()方法,使用方法例如以下: $("#info_table td& ...

  3. jQuery中的事件绑定方法

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

  4. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  5. 模拟JQUERY的延迟方法绑定

    模拟JQUERY的延迟方法绑定, 对于延迟方法绑定,各种语言都有不同的描述 什么回调啊,函数指针啊,委托啊,事件啊等,其实也就是那么大回事,不过用好这些特性,对于扩展和架构是非常有好处的, 好处自然就 ...

  6. Javascript事件模型(三):JavaScript事件绑定方法总结(及Jquery)

    JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 JQuery中绑定事件的几种方法 主要有on().bind( ...

  7. jQuery中绑定事件的几种方法

    以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){});  (2)target.bind("click",functi ...

  8. 用jQuery来绑定事件的3种方法和区别

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. jquery使用on()方法绑定的事件被执行多次的问题

    jQuery用on()方法绑定了事件之后,在代码执行过程中,可能会遇到事件被多次执行的情况. 本来以为是事件冒泡的问题,后来发现是on()方法的特性引起的问题. 简单还原一下问题的场景 这里简单还原一 ...

随机推荐

  1. table行随鼠标变色

    table行随鼠标变色 1.设计表格 <body class="html_body"> <div class="body_div"> & ...

  2. CentOS添加磁盘分区

    (这里的磁盘在vmware workstation VM中添加) 1.关闭虚拟机,在虚拟机设置中添加一个硬盘,然后开启虚拟机. 2.使用fdisk -l命令查看,这时会发现一个为被使用的设备,有2G的 ...

  3. Angular21 动态绑定CSS样式

    1 需求 在前端开发中通常需要动态对某些元素的样式进行动态设定,传统的CSS绑定分为CSS类绑定和Style样式绑定:在Angular中利用相关指令同样可以完成CSS类绑定和CSS样式绑定 2 内置指 ...

  4. IOS开发之XCode学习010:定时器和视图对象

    此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 此工程文件实现功能: 1.通过点击"启动定时器"按钮 ...

  5. es6学习笔记--let和const

    今天学习了es6中的let和const命令,借此整理一下笔记. let : let 和 var 的声明方式一样,但有 var 比不上的优点.下面用 var 和 let 的例子来加深对 let 的理解. ...

  6. java io 节点流和处理流

    JAVA IO操作总结:节点流和处理流 JAVA IO操作总结--节点流和处理流  按照流是否直接与特定的地方(如磁盘.内存.设备等)相连,分为节点流和处理流两类. 节点流:可以从或向一个特定的地方( ...

  7. 搭建web服务器-tomcat+apache+mysql+eclipse

    1. 下载并安装jdk 注意环境变量的配置: java_home: jdk的路径  path:.;%java_home%\bin;%java_home%\jre\bin classpath :  .; ...

  8. 【BZOJ2342】双倍回文(回文树)

    [BZOJ2342]双倍回文(回文树) 题面 BZOJ 题解 构建出回文树之后 在\(fail\)树上进行\(dp\) 如果一个点代表的回文串长度为\(4\)的倍数 并且存在长度为它的一半的回文后缀 ...

  9. 【POJ3683】Priest John's Busiest Day

    题目 John is the only priest in his town. September 1st is the John's busiest day in a year because th ...

  10. Gulp-自动化编译sass和pug文件

    突然发现在我博客文章中,缺少这一块的记录,那我就补一篇吧. gulp的环境配置和安装:http://www.cnblogs.com/padding1015/p/7162024.html 这里就补充一篇 ...