深入理解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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
浅析javascript的return语句
Dec 15 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
BootStrap TreeView使用实例详解
Nov 01 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
详解JavaScript数据类型和判断方法
Sep 04 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
第七节--类的静态成员
2006/11/16 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
限制复选框的最大可选数
2006/07/01 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
JS hashMap实例详解
2016/05/26 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
python输出指定月份日历的方法
2015/04/23 Python
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
护士个人简历自荐信
2013/10/18 职场文书
会展中心部门工作职责
2013/11/27 职场文书
优秀研究生自我鉴定
2013/12/04 职场文书
授权收款委托书范本
2014/10/10 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
总结python多进程multiprocessing的相关知识
2021/06/29 Python