深入理解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 继承实现方法
Aug 26 Javascript
两个JavaScript jsFiddle JSBin在线调试器
Mar 14 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
javascript实现密码强度显示
Mar 18 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
Vue.js开发环境快速搭建教程
Mar 17 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
Vue数字输入框组件的使用方法
Oct 19 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 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
一个查看session内容的函数
2006/10/09 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
PHP7内核之Reference详解
2019/03/14 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
用Python进行行为驱动开发的入门教程
2015/04/23 Python
Python3实现从文件中读取指定行的方法
2015/05/22 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
python树莓派红外反射传感器
2019/01/21 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
蛋白质世界:Protein World
2017/11/23 全球购物
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
信访工作者先进事迹
2014/01/17 职场文书
批评与自我批评材料
2014/02/15 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
服务员岗位职责范本
2015/04/09 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
background-position百分比原理详解
2021/05/08 HTML / CSS
尝试使用Python爬取城市租房信息
2022/04/12 Python