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 ...
随机推荐
- hdu2767之强联通缩点
Proving Equivalences Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- 详细的linux目录结构详细介绍
详细的linux目录结构详细介绍 --树状目录结构图 下面红色字体为比较重要的目录 1./目录 目录 描述 / 第一层次结构的根,整个文件系统层次结构的根目录 /bin/ 需要在单用户模式可用的必要命 ...
- 在eclipse创建和myeclipse一样结构的web项目
之前一直使用myeclipse,现在换成eclipse,但是创建的新项目让我很不习惯,下面这个方法可以解决. 创建好的项目结构如下图所示,不过看着还是很别扭,我们window→show view→ot ...
- Mysql----MySQL的mysql_insert_id和LAST_INSERT_ID(转)
本文介绍的是mysql中last_insert_id和mysql_insert_id的区别 1 mysql_insert_id 一.PHP获取MYSQL新插入数据的ID mysql_insert_id ...
- python reduce & map 习题
基于廖雪峰教程作业 http://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/0014317 ...
- 读取Excel中的数据到DataSet
读取Excel中的数据到DataSet 1.引用命名空间 using System.Data.OleDb; 2.输入Excel文件,输出DataSet public DataSet ExecleDs( ...
- diamond源码阅读-目录监控
PathNode(Path)StandardWatchEventKind(WatchEvent)Watchable(WatchKey WatchService WatchEvent)WatchKey( ...
- linux下nginx php配置redis
之前一直遇到,Module compiled with module API=20090626这个坑问题!!! NOTICE: PHP message: PHP Warning: PHP Star ...
- task15-18
[说明]貌似maven在真实的项目实战中挺重要的,可以省去大量的工作,有必要单独学习一下 15.创建一个新的maven项目 16.在src/main/java下随便创建一个java文件,clean,i ...
- WCF基础之会话、实例和并发
这篇笔记是一些概念性的东西. 会话,借用百科上的描述就是一个客户与服务器之间的不中断的请求响应序列.wcf的会话模式是通过服务契约的SessionModel进行设置的,其值为枚举,分别为:Allowe ...