深入理解jQuery中live与bind方法的区别


Posted in Javascript onDecember 18, 2013

注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用

live的缺点就是,运行完以后不释放空间,太多的使用会占用更多的内存,bind()则点击完以后释放空间

区别一:

Click here

可以给这个元素绑定一个简单的click事件:

$('.clickme').bind('click', function() {
$('body').append('

Another target
');
});

当点击了元素,就会弹出一个警告框。然后,想象一下这之后有另一个元素添加进来了。

尽管这个新的元素也能够匹配选择器 ".clickme" ,但是由于这个元素是在调用 .bind() 之后添加的,所以点击这个元素不会有任何效果。

.live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的:

$('.clickme').live('click', function() {
alert("Live handler called.");
});

然后再添加一个新元素:

$('body').append('

Another target
');

然后再点击新增的元素,他依然能够触发事件处理函数。

 

区别二:

(1)bind方法可以绑定任何JavaScript的事件,而live方法在jQuery1.3的时候只支持click, dblclick, keydown, keypress,keyup,mousedown, mousemove, mouseout, mouseover, 和 mouseup.在jQuery 1.4.1中,甚至也支持 focus 和 blue事件了(映射到更合适,并且可以冒泡的focusin和focusout上)。另外,在jQuery 1.4.1中,也能支持hover(映射到"mouseenter mouseleave")。

(2)live() 并不完全支持通过DOM遍历的方法找到的元素。取而代之的是,应当总是在一个选择器后面直接使用 .live()方法。

(3)当一个元素采用live方法进行事件的绑定的时候,如果想阻止事件的传递或冒泡,就要在函数中return false,仅仅调用stopPropagation()是无法实现阻止事件的传递或者冒泡的

Javascript 相关文章推荐
javascript 一段左右两边随屏滚动的代码
Jun 18 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
解析JSON对象与字符串之间的相互转换
Dec 18 #Javascript
cookie中的path与domain属性详解
Dec 18 #Javascript
浅析Cookie中的Path与domain
Dec 18 #Javascript
jquery.cookie用法详细解析
Dec 18 #Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 #Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 #Javascript
Javascript浅谈之this
Dec 17 #Javascript
You might like
source.php查看源文件
2006/12/09 PHP
用PHP读取和编写XML DOM的实现代码
2011/02/03 PHP
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
Python itertools模块详解
2015/05/09 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
物业管理公司实习生自我鉴定
2013/09/19 职场文书
优秀毕业生自荐信范文
2014/01/01 职场文书
教师党员个人整改措施
2014/10/27 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js
如何通过cmd 连接阿里云服务器
2022/04/18 Servers
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android