深入理解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 相关文章推荐
用javascript实现页面打印的三种方法
Mar 05 Javascript
基于jquery的跨域调用文件
Nov 19 Javascript
动态加载jquery库的方法
Feb 12 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
JS原形与原型链深入详解
May 09 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 Javascript
Javascript实现打鼓效果
Jan 29 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
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
PHP 数组实例说明
2008/08/18 PHP
详解YII关联查询
2016/01/10 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
JavaScript Date对象使用总结
2009/05/14 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
python 图片验证码代码分享
2012/07/04 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
python flask中静态文件的管理方法
2018/03/20 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
在Python中表示一个对象的方法
2019/06/25 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
python 基于opencv去除图片阴影
2021/01/26 Python
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
奉献家乡演讲稿
2014/09/13 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
毕业感言怎么写
2015/07/31 职场文书
大学体育课感想
2015/08/10 职场文书
基于Python编写一个监控CPU的应用系统
2022/06/25 Python