jquery中bind,live,delegate,on的区别
2024-10-19 12:39:09
这几种方法都是绑定事件用到的,但是他们之间有些差别
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绑定事件;
最新文章
- BZOJ3746 : [POI2015]Czarnoksiężnicy okrągłego stołu
- Facebook内部分享:25个高效工作的小技巧
- IOS获取摄像和本地中的资源
- django1.6之创建用户
- Hadoop入门--HDFS(单节点)配置和部署 (一)
- C primer plus 读书笔记第二章
- javascript对象继承的实现
- 【测试Json的多空格问题】
- 常见LINQ语句学习
- 《Windows核心编程》第一讲 对程序错误的处理
- 轻松理解python中的闭包和装饰器 (下)
- WPF的TextBox水印效果详解
- 关于js赋值给input解析
- springboot中使用自定义两级缓存
- 问题之Spring MVC配置后,可以打开jsp页面,但打不开html页面
- JavaScript Uncaught TypeError: Cannot read property &#39;value&#39; of null
- 手撸代码实现equals方法
- ORM基本操作回顾
- flex布局下overflow失效问题
- Pytorch复现Faster-RCNN