深入理解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延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
node.js的事件机制
Feb 08 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 Javascript
JS数据类型STRING使用实例解析
Dec 18 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 Javascript
vue项目实现分页效果
Mar 24 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
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
Python argv用法详解
2016/01/08 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
python图像和办公文档处理总结
2019/05/28 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
Python如何读取、写入CSV数据
2020/07/28 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
Python模块常用四种安装方式
2020/10/20 Python
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
管理科学大学生求职信
2013/11/13 职场文书
团队精神口号
2014/06/06 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
音乐教师个人总结
2015/02/06 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
一文简单了解MySQL前缀索引
2022/04/03 MySQL