jQuery中的事件绑定方法
在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on()。
那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点。
在了解这些之前,首先要知道,不管你用的是(live/ bind / delegate)之中那个方法,最终都是jQuery底层都是调用on方法来完成最终的事件绑定;.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的;
因此从某种角度来讲除了在书写的方便程度及习惯上挑选,不如直接都采用on方法来的痛快和直接
所以在新版的API中都这么写到:
.on()方法事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中,.on()方法 提供绑定事件处理的所有功能
.bind() :没有事件委托机制。
.live() : 高版本的jQuery不支持.live()方法,所以该方法应该少使用。不支持链式调用。
.delegate : $( elements ).delegate( selector, events, data, handler );
总结:
- 在下列情况下,应该使用.live()或.delegate(),而不能使用.bind():
为DOM中的很多元素绑定相同事件;
为DOM中尚不存在的元素绑定事件;
- 用.bind()的代价是非常大的,它会把相同的一个事件处理程序hook到所有匹配的DOM元素上
- 不要再用.live()了,它已经不再被推荐了,而且还有许多问题
- .delegate()会提供很好的方法来提高效率,同时我们可以添加一事件处理方法到动态添加的元素上
我们可以用.on()来代替上述的3种方法
不足点也是有的:
- 并非所有的事件都能冒泡,如load, change, submit, focus, blur
jQuery中的事件绑定方法的更多相关文章
- Jquery中的事件绑定$("#btn").bind("click",function(){ })
Jquery中的事件绑定:$("#btn").bind("click",function(){ }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...
- jQuery 中的事件绑定
一.事件概念 和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...
- jQuery 中的事件绑定与取消绑定
1:在jQuery中使用bind方法进行事件的绑定,bind方法有两个参数,第一个参数是事件的类型例如click,change,keyup,keydown,blur,focus等.第二个参数是一个回调 ...
- jQuery中是事件绑定方式--on、bind、live、delegate
概述:jQuery是我们最常用的js库,对于事件的绑定也是有很多种,on.one.live.bind.delegate等等,接下来我们逐一来进行讲解. 本片文章中事件所带的为版本号,例:v1.7+为1 ...
- js和jQuery中的事件绑定与普通事件
普通事件,是指直接对元素进行事件注册,然后触发 而事件绑定是将事件注册到元素上 两者区别就是在于普通事件不可以重复添加多个事件,若添加也会覆盖,只会触发其中一个事件(最后注册的那个) 而事件绑定是可以 ...
- 关于jquery中的事件绑定bind()和live()
live可以说是bind是方法的变种. 二者的主要区别就是live方法的作用机理是事件委托,live方法的作用机理是将事件绑定DOM的根节点上. live方法的处理机制就是把事件绑定在DOM树的根节点 ...
- jQuery中的事件绑定的几种方式
jQuery目前有on(),bind(),delegate(),live()四种绑定方式,但是随着版本的不断更新,有的方式也相应的被淘汰掉 [band()方式绑定] 3.0版本之前的绑定方式比较常用的 ...
- jQuery学习笔记(三)jQuery中的事件
目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一.加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...
- jQuery中的事件与动画 (你的明天Via Via)
众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...
随机推荐
- python之numpy
一.矩阵的拼接合并 列拼接:np.column_stack() >>> import numpy as np >>> a = np.arange(9).reshap ...
- phpcms 添加memcache支持
1,修改caches/configs/cache.php <?php return array ( 'file1' => array ( 'type' => 'file', 'deb ...
- mysqldump数据库同步遇到的问题
1.同步数据是遇到 没有 lock database权限,报 " mysqldump: Got error: 1044: Access denied for user 'spider_dat ...
- 通过openswan基于Azure平台搭建VPN server
用过Azure的读者都知道,Vnet一直是Azure比较自豪的地方,尤其是VPN,Azure提供了两种VPN以及专线来保证客户数据的安全性,S2S vpn(站点到站点的,基于IPsec的),P2S v ...
- ORACLE 中ROWNUM用法总结(转)
ORACLE 中ROWNUM用法总结! 对于 Oracle 的 rownum 问题,很多资料都说不支持>,>=,=,between...and,只能用以上符号(<.<=.!=) ...
- bzoj4314
首先,我们考虑原题取消k的限制后怎么做. 设(xy)是一个n次单位根,f(x)=(1+x^0)*(1+x^1)*(1+x^2)*...*(1+x^n-1) 参见 http://bx2k.is-prog ...
- document封装一些常用的方法
/** * 批量修改元素样式 */ function css(domObj,styleArry){ for(var i=0;i<styleArry.length;i++){ domObj.sty ...
- jdbc链接数据库的三种方式
/** * jdbc连接数据库 * @author APPle * */ public class Demo1 { //连接数据库的URL private String url = "jdb ...
- linQ学习笔记之二简单的linq使用
最基本的Lambda表达式 (参数列表)=>{f方法体} 参数列表中的参数类型可以是明确类型或者是推断类型 如果是推断类型,则参数的数据类型将由编译器根据上下文自动推断出来 linQ to Ob ...
- nginx配置反向代理解决前后端分离跨域问题
摘自<AngularJS深度剖析与最佳实践>P132 nginx配置文件如下: server { listen ; server_name your.domain.name; locati ...