深入理解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 相关文章推荐
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
自写的一个jQuery圆角插件
Oct 26 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
遍历json获得数据的几种方法小结
Jan 21 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 Javascript
js实现贪吃蛇游戏(简易版)
Sep 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
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
apache rewrite_module模块使用教程
2008/01/10 PHP
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
请离开include_once和require_once
2013/07/18 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
javascript 内存回收机制理解
2011/01/17 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
Python3 入门教程 简单但比较不错
2009/11/29 Python
详解python开发环境搭建
2016/12/16 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
对命令行模式与python交互模式介绍
2018/05/12 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
小学毕业感言300字
2014/02/19 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
趣味运动会策划方案
2014/06/02 职场文书
项目合作意向书
2015/05/08 职场文书
分家协议书范本
2016/03/22 职场文书
JavaScript 数组去重详解
2021/09/15 Javascript