深入理解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 12 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 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防CC攻击实现代码
2011/12/29 PHP
Chrome Web App开发小结
2014/09/04 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
JS中Location使用详解
2015/05/12 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
ant design实现圈选功能
2019/12/17 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python装饰器decorator介绍
2014/11/21 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
python学生管理系统
2019/01/30 Python
python安装pil库方法及代码
2019/06/25 Python
python中p-value的实现方式
2019/12/16 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
介绍一下你对SOA的认识
2016/04/24 面试题
自荐书格式
2013/12/01 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python
SQL注入详解及防范方法
2021/12/06 MySQL