jquery中bind,live,delegate,on的区别
这几种方法都是绑定事件用到的,但是他们之间有些差别
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数
例如:
<ul>
<a href="#"><li>1111111</li></a>
<a href="#"><li>22222</li></a>
<a href="#"><li>33333</li></a>
<a href="#"><li>44444</li></a>
<a href="#"><li>555555</li></a>
</ul>
<script>
$("a").bind("click",function(){
alert("ok")
});
</script>
例如当我们用bind为a元素绑定事件时,有多少a元素,就是绑定多少次事件 ,这样比较消费性能
这种绑定方式有以下缺点:
1)它会绑定事件到所有选出来的元素上 ,例如上面的a元素
2)当页面加载完成是,才可以进行bind(),所以效率较低
3) 不可以为动态创建的html元素绑定事件,即动态创建的html用bind绑定是无效的
live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的
以上面的例子为例:
$("a").live("click",function(){
alert("ok")
});
live是通过冒泡的返航时来绑定事件的,更适合列表页,也可以绑定动态的html,但是目前最新版本的jquery已经不支持live事件绑定了
delegate(selector,[type],[data],fn) 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数
<ul>
<a href="#"><li>1111111</li></a>
<a href="#"><li>22222</li></a>
<a href="#"><li>33333</li></a>
<a href="#"><li>44444</li></a>
<a href="#"><li>555555</li></a>
</ul>
<input type="button" id="btnAdd" value="添加新的元素" />
点击添加新元素按钮,添加一个li元素,并为新添加的li元素绑定事件,代码如下:
$("#btnAdd").on("click",function(){
$("ul").append("<a id='ltLast' href='#''><li>我是后添加的了哦</li></a>");
});
//动态创建的html绑定事件需要用到delegate方法
$("ul").delegate("#ltLast","click",function(){
alert("可以点击我么");
});
.delegate()主要是通过事件代理的方式,一般动态创建的html绑定事件会用到这种方式
on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数
.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制,但是不能为动态的html绑定事件;
jquery中bind,live,delegate,on的区别的更多相关文章
- jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画
地狱的镰刀 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){ ...
- 【转】jQuery中.bind() .live() .delegate() .on()的区别
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert(& ...
- jQuery中.bind() .live() .delegate() .on()的区别
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert(& ...
- jQuery中bind() live() delegate() on() 的区别
实例 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){aler ...
- jQuery中bind方法和live方法区别解析
Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...
- jQuery 中bind(),live(),delegate(),on() 区别(转)
当我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 准备知识: 当我们在开始的时候,有些知识是必须具备的: D ...
- 转 jQuery 中bind(),live(),delegate(),on() 区别
当我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 准备知识: 当我们在开始的时候,有些知识是必须具备的: D ...
- jquery实现input输入框实时输入触发事件代码 ---jQuery 中bind(),live(),delegate(),on() 区别
复制代码 代码如下: <input id="productName" name="productName" value="" /> ...
- jQuery中.bind() .live() .delegate() .on()区别
$(selector).bind(event,data,function) $(selector).live(event,data,function)//jquery1.9版本以下支持,jquery1 ...
随机推荐
- SpringBoot项目的云服务器部署
1.场景还原 springboot配置相当简单,人人皆知.怎么把springboot工程部署到云服务器上呢?可能有人会说,博主你前篇不是讲了java工程的云部署把:但是我想澄清一点的是,我前篇的工程都 ...
- ubunut jdk 配置
sudo mv jdk1.7.0_10 /usr/lib/jvm/ sudo gedit /etc/profile 在profile中加入下面内容: export JAVA_HOME=/usr/lib ...
- strpos 判断字符串是否存在
strpos 中为什么要用逗号隔开的原因是因为 防止找出相匹配的中 , 如 查找1 而数组中 存在 12 那么这个结果也是可以找出来的 ,分别在1 前后加个, 就是为了区 ...
- android greendao3.0 多表关联关系讲解(转)
转自:http://www.jianshu.com/p/dbec25bd575f 前言 之前用过数据库框架:realm.kjdb,今天准备实践学习一下greendao 3.0.greendao 3.0 ...
- HTML5 - 新增的元素,删除的元素
1,HTML5新增的元素(1)用于构建页面的语义元素:<article>,<aside>,<figcaption>,<figure>,<foote ...
- 微信小程序的文件结构 —— 微信小程序教程系列(1)
所有文章均是CSDN博客所看,已按照作者要求,注明出处了,感谢作者的整理! 博客文章地址:http://blog.csdn.net/michael_ouyang/article/details/548 ...
- c语言的编译和运行流程
C语言源程序经过编译器进行词法分析 语法分析 等过程生成中间语言(object后缀的文件)编译期间会生成一个字符表和静态分配空间(如new static 全局变量)它们所需的内存空间可以计算出来放在链 ...
- centos7.0 tomcat9.0 ip访问 manager
版本:Tomcat 9.0 问题:新安装的tomcat,用其他机器访问tomcat的Server Status.Manager App.Host Manager三个页面均显示403(本机访问没有问题) ...
- 【BZOJ2401】陶陶的难题I 欧拉函数+线性筛
[BZOJ2401]陶陶的难题I 题意:求,n<=1000000,T<=100000 题解:直接做是n*sqrt(n)的,显然会TLE,不过这题a和b都是循环到n,那么就可以进行如下的神奇 ...
- 【BZOJ1132】[POI2008]Tro 几何
[BZOJ1132][POI2008]Tro Description 平面上有N个点. 求出所有以这N个点为顶点的三角形的面积和 N<=3000 Input 第一行给出数字N,N在[3,3000 ...