深入理解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的6个Tab选项卡插件
Sep 03 Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 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
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
js实现网页收藏功能
2015/12/17 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
python实现socket客户端和服务端简单示例
2014/02/24 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
简单谈谈python基本数据类型
2018/09/26 Python
Python 变量类型详解
2018/10/10 Python
Python对切片命名的实现方法
2018/10/16 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
酒店开业庆典主持词
2014/03/21 职场文书
儿童生日会策划方案
2014/05/15 职场文书
学生个人评语大全
2015/01/04 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS