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. Windows下mysql安装配置问题

    下载最新版的mysql: https://dev.mysql.com/downloads/mysql/ 下载完成后解压打开安装包如下 打开cmd以管理员身份运行(一定要以管理员身份运行) 然后输入命令 ...

  2. 什么是openshift

    Openshift是一个开源的容器云平台,底层基于当前容器的事实标准编排系统Kubernetes和docker引擎,企业可以基于此平台搭建内部Paas平台,贯穿CI/CD流程,提高企业IT效率,拥抱D ...

  3. Js学习02--变量、关键字、标识符

    一.Js变量的定义 1.定义变量的目的 在内存中分配一块存储空间给变量,方便以后存储数据. 2.如何定义变量 任何变量在使用前都必须定义变量 var 变量名称 eg: var name,age,sex ...

  4. 如何将 Redis 用于微服务通信的事件存储

    来源:Redislabs作者:Martin Forstner 翻译:Kevin (公众号:中间件小哥) 以我的经验,将某些应用拆分成更小的.松耦合的.可协同工作的独立逻辑业务服务会更易于构建和维护.这 ...

  5. SpringBoot项目jar启动端口设置

    SpringBoot项目打包后,在target下生成的jar文件可以使用 Java - jar 直接启动,指定端口号配置 java -jar epjs-eureka.jar --server.port ...

  6. 启动mysql服务器

    介绍了启动服务器的两种方式,以及可能遇到的问题 第一种:系统服务 1)可以通过右击方式一步步找到服务 右击计算机->选择管理->找到服务,然后双击打开,找到mysql,我安装的是mysql ...

  7. RAC环境备份,RMAN异机在单实例环境恢复redo问题

    目的:客户环境11.2.0.4 ,多节点RAC环境,现在使用带库的备份,在单机环境测试备份有效性 1.normal参数文件 删除集群相关参数cluster 2.mount 使用备份的控制文件进行还原 ...

  8. 通俗易懂的join、left join、right join、full join、cross join

    内连接:列出与连接条件匹配的数据行(join\inner join) 外连接:两表合并,如有不相同的列,另外一个表显示null(left join\right join\full outer join ...

  9. 报告题目:HAO智能:HI + AI + OI

     报告题目:HAO智能:HI + AI + OI 报告摘要:大数据面向异构自治的多源海量数据, 旨在挖掘数据间复杂且演化的关联.大数据知识工程(BigKE)从大数据的 HACE定理开始, 从大知识建模 ...

  10. 5_PHP数组_3_数组处理函数及其应用_7_数组排列函数

    以下为学习孔祥盛主编的<PHP编程基础与实例教程>(第二版)所做的笔记. 数组排列函数 1. sort() 函数 程序: <?php $array = array("img ...