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 ...
随机推荐
- mv 命令 简要
1.mv test.txt test1.txt 给文件重命名 2.mv test.txt aaDir 将test.txt文件移动到aaDir文件夹中 3.mv -t /hom ...
- static 修饰的变量在程序中容易出现的问题
package lianxi; public class StaticTest { int a = 0; static int b =0; StaticTest(){ ...
- 《TomCat与Java Web开发技术详解》(第二版) 第六章节的学习总结 ---- JSP技术
第六章主要介绍了JSP的相关知识. 1.JSP:是通过在HTML文件中加入java程序片段(Java Scriptlet)和JSP标记,就构成了JSP文件.JSP实质上是Servlet.JSP的API ...
- ubuntu安装源
1.编辑sources.list文件 sudo vi /etc/apt/sources.list 添加以下安装源 #台湾源 deb http://tw.archive.ubuntu.com/ubunt ...
- 【转】python测试开发面试题
出处:http://my.oschina.net/u/1433482/blog/467954?fromerr=WrfxL2Kw 试卷时间 60分钟,请不要在试卷上作答,用A4纸做答题纸作答. 一,中文 ...
- [转]基于Python的接口测试框架
http://blog.csdn.net/wyb199026/article/details/51485322 背景 最近公司在做消息推送,那么自然就会产生很多接口,测试的过程中需要调用接口,我就突然 ...
- C# 代码 手工 配置 Log4Net 2种方法
这个初始化要在 获取 ILog 接口的代码之前完成, 之后按通常方式使用 log4net 就行了. 不用携带 config 配置文件. 方法1: /// <summary> /// 使用文 ...
- vue v-on命令
<!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 ...
- 我的Android进阶之旅------> Android在TextView中显示图片方法
面试题:请说出Android SDK支持哪些方式显示富文本信息(不同颜色.大小.并包含图像的文本信息),并简要说明实现方法. 答案:Android SDK支持如下显示富文本信息的方式. 1.使用Tex ...
- 程序运行之ELF文件的段
我们将之前的代码增加下变量来具体看下 在代码中增加了全局变量以及静态变量,还有一个简单的函数. #include <stdio.h> int global_var=1; int globa ...