深入理解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 相关文章推荐
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
JavaScript手机振动API
Jun 11 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
jQuery实现滚动效果
Nov 17 jQuery
Vue触发式全局组件构建的方法
Nov 28 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
VSCode launch.json配置详细教程
Jun 18 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
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
初始Nodejs
2014/11/08 NodeJs
获取JavaScript异步函数的返回值
2016/12/21 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
shiro授权的实现原理
2017/09/21 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
Python内置函数delattr的具体用法
2017/11/23 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
Django对models里的objects的使用详解
2019/08/17 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
军训的自我鉴定
2013/12/10 职场文书
毕业生就业协议书
2014/04/11 职场文书
班训口号大全
2014/06/18 职场文书
邀请书格式范文
2015/02/02 职场文书
夫妻吵架保证书
2015/05/08 职场文书
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
python周期任务调度工具Schedule使用详解
2021/11/23 Python