深入理解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 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
深入理解(function(){... })();
Aug 16 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
js实现点赞按钮功能的实例代码
Mar 06 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 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
开源SNS系统-ThinkSNS
2008/05/18 PHP
深入php list()函数的详解
2013/06/05 PHP
php无限遍历目录示例
2014/02/21 PHP
分享php邮件管理器源码
2016/01/06 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
详解php命令注入攻击
2019/04/06 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
js定时器实例分享
2016/12/20 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
主持人演讲稿范文
2013/12/28 职场文书
中年人生感言
2014/02/04 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
工程主管竞聘书
2015/09/15 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书