深入理解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 相关文章推荐
使用jsonp完美解决跨域问题
Nov 27 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 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
建立动态的WML站点(二)
2006/10/09 PHP
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
基于jquery的表格排序
2010/09/11 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
vue中axios封装使用的完整教程
2021/03/03 Vue.js
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
举例讲解Python中装饰器的用法
2015/04/27 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
美国性感女装网站:bebe
2017/03/04 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
捷科时代的软件测试笔试题
2015/11/09 面试题
五一家具促销方案
2014/01/10 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
统计专业自荐书
2014/07/06 职场文书
2014年小学工作总结
2014/11/26 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
综合办公室岗位职责
2015/04/11 职场文书
区域销售大会开幕词
2016/03/04 职场文书