从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. linq使用日记

    //普通查询 var query = (from t in ServiceList                                  where t.CreateUserID == A ...

  2. C# 中?和??的用法

    最近在看官方的源码时,经常看到有 Int? sum; 和 FileProvider = FileProvider ??builder.GetFileProvider(); 一个问号: 很多数据类型时不 ...

  3. Jenkins + Github持续集成构建Docker容器,维基百科&人工自能(AI)模块

    本文分两部分,第一部分是手动计划任务的方式构建Github上的Docker程序,第二部分是用Github webhook Trigger一个自动构建任务. Jenkins采用2.5版本Docker采用 ...

  4. java编程思想第四版第九章总结

    1. 策略设计模式 参考这篇文章:http://blog.csdn.net/chenjie19891104/article/details/6396458 讲的很清楚,策略设计模式.并且举了一个例子, ...

  5. 【Luogu4137】Rmq Problem/mex (莫队)

    [Luogu4137]Rmq Problem/mex (莫队) 题面 洛谷 题解 裸的莫队 暴力跳\(ans\)就能\(AC\) 考虑复杂度有保证的做法 每次计算的时候把数字按照大小也分块 每次就枚举 ...

  6. [HDU5765]Bonds

    题面 题意 给出一张\(n\)点\(m\)边无向连通图,求每条边出现在多少个割集中. \(n\le20,m\le\frac{n(n-1)}{2}\) sol 所谓割集,就是指把\(n\)个点分成两个集 ...

  7. [POI2014]KUR-Couriers

    题意 给一个数列,每次询问一个区间内有没有一个数出现次数超过一半 题解 主席树,一个数出现次数>一半,这个区间内只有这一个数满足,那么主席树直接维护所有数的出现次数,直接在树上二分查询 # in ...

  8. 小程序 for循环 报错 Cannot read property 'total' of undefined

    for循环一直报错  Cannot read property 'total' of undefined,但total在起初是有定义的,后来找到了问题,是i<=的问题,改为<不报错了. i ...

  9. JavaScript一看就懂(1)作用域

    函数级作用域 1.函数外声明的变量为全局变量,函数内可以直接访问全局变量: var global_var = 10; //全局变量 function a(){ alert(global_var); / ...

  10. iOS学习——UITableViewCell两种重用方法的区别

    今天在开发过程中用到了UITableView,在对cell进行设置的时候,我发现对UITableViewCell的重用设置的方法有如下两种,刚开始我也不太清楚这两种之间有什么区别.直到我在使用方法二进 ...