关于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事件核心 - ...
随机推荐
- TCP/IP协议的工作流程
1.在源主机上,应用层将一串应用数据流向下传输给传输层 2.传输层将应用数据截流成分组,并加上TCP报头形成TCP段,向下递交给网络层 3.在网络层给TCP段加上包括源主机,目的主机IP地址的IP报头 ...
- IDEA 获取类的相对路径和绝对路径
1.相对路径: 结果:action.HelloAction 2.绝对路径 结果:E:\javaProject\JavaEEProject\day08_Struts2_test01\src\action ...
- 09 Servlet相关知识点---学习笔记
1.概念:运行在服务器端的小程序 Servlet就是一个接口,定义了Java类被浏览器访问到(tomcat识别)的规则.将来我们自定义一个类,实现Servlet接口,复写方法. 2.快速入门:(1)创 ...
- 【C++札记】const关键字
C++中const关键字无处不在,我这里做下汇总,作为工具文章方便翻阅. 一:修饰数据成员 修饰的成员一单定义初始化后不能再进行修改,如: const int a = 10; a =20; //重新赋 ...
- DolphinPHP(海豚框架)初步学习
由于工作原因需要学习DolphinPHP框架,在此记录一下! 首先交代下环境,我用的是phpStudy集成环境,然后海豚框架是最新的1.4.2版本 ok,接下来我们开始学习,最基础的,是我们需要将我们 ...
- 本地yum源 、阿里yum源、163yum源的配置安装
一.本地yum源 (我使用的7.3版本) 1..添加一个新的yum源配置文件dvd.repo(文件名字自定义) vi etc/yum.repos.d 添加新的内容: name=rhel_dvd ...
- Python-16-继承、封装、多态
一.继承 1. 概念 继承是一种创建新类的方式,新建的类可以继承一个或多个父类(python支持多继承),父类又可称为基类或超类,新建的类称为派生类或子类. 子类会“”遗传”父类的属性,从而解决代码重 ...
- python使用matplotlib在一个图形中绘制多个子图以及一个子图中绘制多条动态折线问题
在讲解绘制多个子图之前先简单了解一下使用matplotlib绘制一个图,导入绘图所需库matplotlib并创建一个等间隔的列表x,将[0,2*pi]等分为50等份,绘制函数sin(x).当没有给定x ...
- 100天搞定机器学习|Day55 最大熵模型
1.熵的定义 熵最早是一个物理学概念,由克劳修斯于1854年提出,它是描述事物无序性的参数,跟热力学第二定律的宏观方向性有关:在不加外力的情况下,总是往混乱状态改变.熵增是宇宙的基本定律,自然的有序状 ...
- kubernetes 实践一:基本概念和架构
这里记录kubernetes学习和使用过程中的内容. CentOS7 k8s-1.13 flanneld-0.10 docker-18.06 etcd-3.3 kubernetes基本概念 kuber ...