1.bind()方法 (只能给已经存在的元素上绑定事件)

只能给调用它的时候已经存在的元素绑定事件,不能给未来新增的元素绑定事件。

$('ul li').bind('click', function(){
 $(this).addClass('active').siblings().removeClass('active');
});

2.live()方法(绑定到document DOM节点上。和.bind()的优势是支持动态数据)

jQuery 1.3新增的.live()方法代替.bind()方法。live()方法会把click事件绑定到$(document)对象,但是生成了不必要的jQuery对象,导致性能损失;

(function($){$("#info_table td").live("click",function(){/*显示更多信息*/}); })(jQuery);使用叫做“早委托”的hack,在整个dom元素加载之前调用live可以减少jquery对象的生成,解决上述缺点。(function($){...})(jQuery)是一个“立即执行的匿名函数”,这时候刚好document元素可用,而整个DOM还远未生成。

为解决“事件传播链”过长的问题,jQuery从1.4开始支持在使用.live()方法时配合使用一个上下文参数:

$("td",$("#info_table")[0]).live("click",function(){/ 显示更多信息 /});“

受托方”就从默认的$(document)变成了$("#info_table")[0],节省了冒泡的旅程。只能放在直接选择的元素后面,不支持链接使用,即$("#info_table td").live...可以,但$("#info_table").find("td").live...不行;

3.delegate()方法(更精确的小范围使用事件代理,性能优于.live())

为了解决无谓生成元素集合的问题,jQuery 1.4.2干脆直接引入了一个新方法.delegate()

$("#info_table").delegate("td","click",function(){/*显示更多信息*/});

优点:(或者说解决了.live()方法的如下问题):

直接将目标元素选择符("td")、事件("click")及处理程序与“受拖方”$("#info_table")绑定,不额外收集元素、事件传播路径缩短、语义明确;

支持在连缀的DOM遍历方法后面调用,即支持$("table").find("#info").delegate...,支持精确控制;

4.on()方法-1.9版本整合了之前的三种方式的新事件绑定机制

$("#info_table").on("click","td",function(){/*显示更多信息*/});参数的位置写法与delegate不一样

jQuery 1.7为了解决.bind()、.live()和.delegate()并存造成的不一致性问题,将会增加一对新的事件方法:.on()和.off():

$(elems).on(events, selector, data, fn);

$(elems).off(events, selector, fn);//相反的方法

说明:

on方法是当前JQuery推荐使用的事件绑定方法,附加只运行一次就删除函数的方法是one()。

关于jquery的事件委托-bind,live,delegate,on的区别发展的更多相关文章

  1. 转载: jQuery事件委托( bind() \ live() \ delegate()) [委托 和 绑定的故事]

    转载:http://blog.csdn.net/zc2087/article/details/7287429 随着DOM结构的复杂化和Ajax等动态脚本技术的运用,事件委托自然浮出了水面.jQuery ...

  2. JS与Jquery的事件委托——解决了绑定相同事件的问题

    概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完 ...

  3. JS与Jquery的事件委托

    参考:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委 ...

  4. JS与Jquery的事件委托机制

    传送:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委 ...

  5. jQuery 触发事件 移动端和pc端的区别

    jQuery 触发事件 移动端和pc端的区别 <pre>mousedown event.pageXmousemove event.pageXmouseup event.pageXtouch ...

  6. jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on

    事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析 ...

  7. jQuery事件函数bind,live,delegate的区别

    DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何 ...

  8. jQuery事件:bind、delegate、on的区别

    最近在AngularJS的开发中,遇到一个神奇的事情:我们用到livebox来预览评论列表中的图片, 然而评论列表是由Angular Resource动态载入的.不可思议的是,点击这些动态载入的图片仍 ...

  9. jQuery代码优化 事件委托篇

    <转自 http://www.jb51.net/article/28770.htm> 参考文章:  解密jQuery事件核心 - 绑定设计(一) 参考文章:  解密jQuery事件核心 - ...

随机推荐

  1. java笔记3

    面向对象的特点:   1.封装:   2.继承   3.多态 好处:   是一种符合人们思考习惯的思想  可以将复杂的事情简单化  将程序员从执行者变为指挥者 二 类与对象 成员变量与局部变量的区别: ...

  2. 简单的python爬虫教程:批量爬取图片

    python编程语言,可以说是新型语言,也是这两年来发展比较快的一种语言,而且不管是少儿还是成年人都可以学习这个新型编程语言,今天南京小码王python培训机构变为大家分享了一个python爬虫教程. ...

  3. python学习-65 继承2-子类中调用父类的方法

    子类中调用父类的方法 1.子类继承了父类的方法,然后想进行修改,那么就需要在子类中调用父类的方法. 2.方法一:父类名 class School: Country = 'china' def __in ...

  4. golang面对接口

  5. SpringCloud之熔断器Hystrix及服务监控Dashboard

    目的:     服务雪崩效应 服务熔断服务降级 Hystrix默认超时时间设置 Hystrix服务监控Dashboard 服务雪崩效应 雪崩效应就是一种不稳定的平衡状态也是加密算法的一种特征,它指明文 ...

  6. ADO.NET 八(一个例子)

    可视化方式绑定 DataGridView 控件(写的不详细,结合上一篇) 使用可视化数据绑定方式可以快速完成将数据表中的数据显示在 DataGridView 控件中的操作,并可以很容易地对绑定列的属性 ...

  7. CentOS下安装mysql-server提示No package mysql-server avaliable

    出现这个原因是CentOS使用mariadb-server代替掉了mysql-server,因此如果想使用mysql-server需要先更新仓库地址,使用以下命令: wget http://repo. ...

  8. Mysql 一些命令记录

    查看数据库当前的状态 show processlist; 查询表索引的基数 show index from LoadingPlan; 重新统计表格的索引基数 analyze table Loading ...

  9. Tomcat - 启动闪退

    版本:Tomcat 9 问题:启动闪退.在控制台中输入"java -version"可以正常输出java的版本信息,但是使用start.bat启动时候闪退. 解决方法:配置系统环境 ...

  10. SIM7600CE http post

    SIM7600CE是一款SMT封装的模块,支持 LTE-TDD/LTE-FDD/HSPA+/TD-SCDMA/EVDO和GSM/GPRS/EDGE等频段,支持LTE CAT4(下行速度为150Mbps ...