jquery bind、delegate、live、on的区别及联系

概述

jquery提供了好几个API都可以实现事件绑定, 如 delegate, live , bind 等, 可是有没有疑惑这几个API之间有什么区别和联系呢?

其实 .delegate, .live, .on这三个都API可以事先事件绑定,只不过有一点稍微的不同点。他们属于jQuery不同时期的同一个功能的不同名称实现。如果jQ版本大于1.7,建议使用.on 可以保证向上兼容。查看jquery源码知道, jquery很多地方都是使用on处理事件绑定的。

分析

delegate
jquery1.4.2及其以上版本;

delegate() 为指定的元素(被选元素的子元素)添加一个或多个事件处理程序,
并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)

bind
适用所有版本,但是根据官网解释,自从jquery1.7版本以后bind()函数推荐用on()来代替。

bind()向匹配元素添加一个或多个事件处理器。

live
jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替。

live() 向当前或未来的匹配元素添加一个或多个事件处理器

on
jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式;

on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

区别及联系

相同点:

1.都支持单元素多事件的绑定;空格相隔方式或者大括号替代方式;
2.均是通过事件冒泡方式,将事件传递到document进行事件的响应;

不同点:

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()差些,想了解具体情况

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

事件绑定方式

.bind()是直接绑定在元素上
.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。和.bind()的优势是支持动态数据。
.delegate()则是更精确的小范围使用事件代理,性能优于.live()
.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制

取消事件绑定

delegate 对应 undelegate
live 对应 die
bind 对应 unbind
on 对应 off

具体用法参考jQuery手册

参考
http://www.cnblogs.com/xilipu31/p/4105794.html
http://blog.csdn.net/panfang/article/details/21705681

jquery bind、delegate、live、on的区别及联系的更多相关文章

  1. jQuery的.bind()、.live()和.delegate(),on之间区别

    基本要素 51CTO推荐专题:jQuery从入门到精通 DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击 ...

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

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

  3. 详解jQuery中 .bind() vs .live() vs .delegate() vs .on() 的区别

    转载自:http://zhuzhichao.com/2013/12/differences-between-jquery-bind-vs-live/ 我见过很多开发者很困惑关于jQuery中的.bin ...

  4. jquery bind()方法与live()方法的区别

    jquery bind() 方法和 live() 方法都可以绑定元素事件. <!DOCTYPE html> <html> <head> <meta chars ...

  5. 【jQuery】【转】jQuery中的trigger和triggerHandler区别

    trigger(event, [data]) 在每一个匹配的元素上触发某类事件. 这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit',则同样会导致浏览器 ...

  6. 关于Jquery的delegate绑定事件无效

    今天在做一个页面,用的是easyui页面有很多的tabs,里面都放了iframe 需要在load事件动态调整iframe高度 发现始终无法使用delegate来绑定load事件. 纠结了一下午发现了问 ...

  7. 点击页面其它地方隐藏div所想到的jQuery的delegate

    在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...

  8. jQuery的delegate()与proxy()方法

    1. jQuery 事件 - delegate() 方法 定义和用法 delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数. 使用 ...

  9. 由点击页面其它地方隐藏div所想到的jQuery的delegate

    对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件 ...

随机推荐

  1. POJ(3468)

    A Simple Problem with Integers http://poj.org/problem?id=3468 #include <stdio.h> struct node { ...

  2. vc 中调用COM组件的方法

    需求:1.创建myCom.dll,该COM只有一个组件,两个接口:   IGetRes--方法Hello(),   IGetResEx--方法HelloEx() 2.在工程中导入组件或类型库  #im ...

  3. 性能检测工具介绍-Linux系统命令行

    本文介绍的关于Linux自带命令进行性能检测的介绍,详细介绍这些linux自带的工具的使用. 一.uptime uptime命令的显示结果包括服务器已经运行了多长时间,有多少登陆用户和对服务器性能的总 ...

  4. asp.net Gridview 的用法

    留个档. <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="Fa ...

  5. componentsSeparatedByString,componentsJoinedByString,componentsSeparatedByCharactersInSet

    将string字符串转换为array数组 NSArray  *array = [Str componentsSeparatedByString:@","]; ==反向方法 将arr ...

  6. mysql时间查看以及定时器相关操作

    1.查看事件 show events select * from mysql.event 2.查看是否开启定时器 0:off:1:on 开启定时器:set global event_scheduler ...

  7. 【随笔】ARP和RARP

    ARP协议是什么? ARP协议是"Address Resolution Protocol"(地址解析协议)的缩写.在局域网中,网络中实际传输的是"帧",帧里面是 ...

  8. Lua.LearningLua.5-document-for-luaL_findtable-function

    Learning Lua: 5 - Document for luaL_findtable() function 文档中没有找到luaL_findtable()函数的说明,这里尝试补充. LUALIB ...

  9. 遇到的check the manual that corresponds to your MySQL server version for the right syntax错误

    遇到的check the manual that corresponds to your MySQL server version for the right syntax错误. 结果发现是SQL关键 ...

  10. Maven学习之 插件plugin

    Maven本质上是一个执行插件的框架.插件共分两类:build插件和reporting插件. build插件,会在build阶段被执行,应该配置在POM的<build/>元素中. repo ...