深入理解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 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
基于vue的换肤功能的示例代码
Oct 10 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
从源码角度来回答keep-alive组件的缓存原理
Jan 18 Javascript
Nest.js散列与加密实例详解
Feb 24 Javascript
解析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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
php SQL防注入代码集合
2008/04/25 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
php生成RSS订阅的方法
2015/02/13 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
实习生自荐信范文分享
2013/11/27 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
英文感谢信范文
2015/01/21 职场文书
保研导师推荐信
2015/03/25 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技
SpringBoot详解执行过程
2022/07/15 Java/Android