关于jquery的事件委托-bind,live,delegate,on的区别发展
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的区别发展的更多相关文章
- 转载: jQuery事件委托( bind() \ live() \ delegate()) [委托 和 绑定的故事]
转载:http://blog.csdn.net/zc2087/article/details/7287429 随着DOM结构的复杂化和Ajax等动态脚本技术的运用,事件委托自然浮出了水面.jQuery ...
- JS与Jquery的事件委托——解决了绑定相同事件的问题
概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完 ...
- JS与Jquery的事件委托
参考:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委 ...
- JS与Jquery的事件委托机制
传送:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委 ...
- jQuery 触发事件 移动端和pc端的区别
jQuery 触发事件 移动端和pc端的区别 <pre>mousedown event.pageXmousemove event.pageXmouseup event.pageXtouch ...
- jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on
事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析 ...
- jQuery事件函数bind,live,delegate的区别
DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何 ...
- jQuery事件:bind、delegate、on的区别
最近在AngularJS的开发中,遇到一个神奇的事情:我们用到livebox来预览评论列表中的图片, 然而评论列表是由Angular Resource动态载入的.不可思议的是,点击这些动态载入的图片仍 ...
- jQuery代码优化 事件委托篇
<转自 http://www.jb51.net/article/28770.htm> 参考文章: 解密jQuery事件核心 - 绑定设计(一) 参考文章: 解密jQuery事件核心 - ...
随机推荐
- 【剑指offer】面试题 20. 表示数值的字符串
面试题 20. 表示数值的字符串
- 长乐培训Day4
T1 矩阵 题目 [题目描述] 从前有个 n×m 的矩阵,初始时每个位置均为 0.你需要依次执行 q 个操作,每个操作会指定一行或一列,然后将该行或该列的所有元素全部赋为一个相同的值. 输出操作完成后 ...
- Linux下使用ip netns命令进行网口的隔离和配置ip地址
1. 添加隔离标记符: ip netns add fd 2. 将指定网卡放入隔离中: ip link set eth1 netns fd 3. 在隔离环境下执行命令: ip netns exec fd ...
- SQL server 常见错误--登录连接失败和附加数据库失败
问题1:数据库软件登录连接不了,因为SQL server有部分服务没有开启,需要手动开启. 解决:计算机管理-->服务-->开启SQL server服务(具体那个自己慢慢试,就 ...
- -Dmaven.test.skip=true 和 -DskipTests
-DskipTests,不执行测试用例,但编译测试用例类生成相应的class文件至target/test-classes下. -Dmaven.test.skip=true,不执行测试用例,也不编译测试 ...
- Luogu3214 HNOI2011 卡农 组合、DP
传送门 火题qwq 我们需要求的是满足元素个数为\(M\).元素取值范围为\([1,2^n-1]\).元素异或和为\(0\)的集合的数量. 首先我们可以计算元素有序的方案数(即计算满足这些条件的序列的 ...
- windows 查看端口占用以及解决办法
windows 下查看所有端口程序1 netstat -ano 查看所有的端口占用情况2 netstat -ano|findstr "443" 查看端口为443的程序占用情况3 t ...
- Windows10如何卸载OneDrive
Windows10如何卸载OneDrive 来源 https://zhuanlan.zhihu.com/p/23985905 1) 禁止onedrive自启动简单的就是在任务管理器的启动中禁用oned ...
- SQL注入绕过技巧
1.绕过空格(注释符/* */,%a0): 两个空格代替一个空格,用Tab代替空格,%a0=空格: % % %0a %0b %0c %0d %a0 %00 /**/ /*!*/ 最基本的绕过方法,用注 ...
- Duplicate zip entry [com/umeng/analytics/a.class==analytics-5.5.3.jar:com/umeng/analytics/AnalyticsConfig.class
项目中需要用到Umeng统计分析,按照官网上的步骤做混淆后,在签名时报下面的错误: Error:java.io.IOException:Can't read [/.gradle/caches/modu ...