深入理解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 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
理解Javascript_11_constructor实现原理
Oct 18 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
js实现简单的秒表
Jan 16 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
.htaccess文件保护实例讲解
2011/02/06 PHP
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
php去除字符串换行符示例分享
2014/02/13 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
Python运用于数据分析的简单教程
2015/03/27 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
Django中的cookie和session
2019/08/27 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
HEMA英国:荷兰原创设计
2018/08/28 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
高中家长寄语
2014/04/02 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
使用python绘制分组对比柱状图
2022/04/21 Python