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 ...
随机推荐
- LinkedList add remove get 代码分析
add void linkLast(E e) { //e 要添加的元素 final Node<E> l = last; // 最后一个元素 final Node<E> newN ...
- [译]GLUT教程 - 重整子窗体
Lighthouse3d.com >> GLUT Tutorial >> Subwindows >> Reshape Subwindows 重整函数的回调需要处理两 ...
- 当客户端提交更新数据请求时,是先写入edits,然后再写入内存的
http://blog.sina.com.cn/s/blog_6f83c7470101b7d3.html http://blog.csdn.net/slq1023/article/details/49 ...
- PHP将多级目录打包成zip文件
最近接触PHP,需要用到zip压缩,在网上搜索的一大堆,发现代码都不低于50行. 而且调用还很费事(基础太少看不懂).让我收获的是Php提供有一个ZipArchive类,并有如下方法. bool a ...
- memcached使用总结
我的linux版本信息:Linux version 4.4.0-78-generic (buildd@lgw01-11) (gcc version 5.4.0 20160609 (Ubuntu 5.4 ...
- ubuntu study
1.statement a.Fist af all,I think myself be to study miv in instruction. b.again,I think myself be t ...
- 实用T-SQL代码
1.根据出生日期计算当前已满周岁 DECLARE @birth datetime SET @birth='1990-01-01' ),) ),) 2.COUNT(expression) just re ...
- zoj 3716 Ribbon Gymnastics【神奇的计算几何】
题目:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3716 来源:http://acm.hust.edu.cn/vjudg ...
- 九度OJ 1194:八进制 (进制转换)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:3521 解决:2058 题目描述: 输入一个整数,将其转换成八进制数输出. 输入: 输入包括一个整数N(0<=N<=100000 ...
- Android笔记之使用ZXing扫描二维码
ZXing发布版下载地址:https://github.com/zxing/zxing/releases 为了能让官方Demo跑起来,先把ZXing核心部分core复制到自己的工程里 还要把andro ...