jQuery中.live()方法的用法深入解析


Posted in Javascript onDecember 30, 2013

给jquery动态生成的页面元素添加事件?使用livequery插件,或可以使用jquery的live方法。摘录一段live简单使用方法。

更多详情还见官网 http://api.jquery.com/live/

live(type, [data],fn)

概述

jQuery给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。

这个方法是基本是的 .bind() 方法的一个变体。使用 .bind()时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说

Click here
 
可以给这个元素绑定一个简单的click事件:

$('.clickme').bind('click', function() {
 alert("Bound handler called.");     
}); 

当点击了元素,就会弹出一个警告框。

然后,想象一下这之后有另一个元素添加进来了。

$('body').append('
Another target
');

尽管这个新的元素也能够匹配选择器".clickme" ,但是由于这个元素是在调用 .bind() 之后添加的,所以点击这个元素不会有任何效果。

.live()就提供了对应这种情况的方法。如果我们是这样绑定click事件的:

$('.clickme').live('click', function() {
 alert("Live handler called.");      
});

然后再添加一个新元素:

$('body').append('
Another target
');

然后再点击新增的元素,他依然能够触发事件处理函数。 

事件委托

.live()方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。

传递给 .live()的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM树的根节点上。在我们的例子中,当点击新的元素后,会依次发生下列步骤:

1、生成一个click事件传递给<div> 来处理

2、由于没有事件处理函数直接绑定在 <div>上,所以事件冒泡到DOM树上

3、事件不断冒泡一直到DOM树的根节点,默认情况下上面绑定了这个特殊的事件处理函数。

4、执行由 .live() 绑定的特殊的click 事件处理函数。

5、这个事件处理函数首先检测事件对象的target 来确定是不是需要继续。这个测试是通过检测 $(event.target).closest('.clickme')能否找到匹配的元素来实现的。

6、如果找到了匹配的元素,那么调用原始的事件处理函数。

由于只有在事件发生时才会在上面的第五步里做测试,因此在任何时候添加的元素都能够响应这个事件。

附加说明

.live()虽然很有用,但由于其特殊的实现方式,所以不能简单的在任何情况下替换 .bind()。主要的不同有:

在jQuery 1.4中,.live()方法支持自定义事件,也支持所有的JavaScript 事件。在jQuery 1.4.1中,甚至也支持 focus 和 blue事件了(映射到更合适,并且可以冒泡的focusin和focusout上)。

另外,在jQuery1.4.1中,也能支持hover(映射到"mouseenter mouseleave")。然而在jQuery1.3.x中,只支持支持的JavaScript事件和自定义事件:click, dblclick, keydown, keypress,keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.

.live()并不完全支持通过DOM遍历的方法找到的元素。取而代之的是,应当总是在一个选择器后面直接使用 .live()方法,正如前面例子里提到的。

当一个事件处理函数用 .live()绑定后,要停止执行其他的事件处理函数,那么这个函数必须返回 false。 仅仅调用 .stopPropagation()无法实现这个目的。

参考 .bind() 方法可以获得更多关于事件绑定的信息。

在jQuery 1.4.1中,你可以一次绑定多个事件给 .live() ,跟.bind() 提供的功能类似。

在jQuery 1.4中,data参数可以用于把附加信息传递给事件处理函数。一个很好的用处是应付由闭包导致的问题。可以参考 .bind()的讨论来获得更多信息。

参数

typeString     事件类型

data(可选)    Object          欲绑定的事件处理函数

fn                  Function        欲绑定的事件处理函数

示例

HTML 代码:
 
Click me!

jQuery 代码:
    $("p").live("click", function(){
         $(this).after("

Another paragraph!

");
    });

描述:

阻止默认事件行为和事件冒泡,返回false

jQuery 代码:
$("a").live("click", function() { returnfalse; });

描述:

仅仅阻止默认事件行为

jQuery 代码:
$("a").live("click", function(event){
    event.preventDefault();
 });

Javascript 相关文章推荐
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
微信小程序实现默认第一个选中变色效果
Jul 17 Javascript
浅谈对于react-thunk中间件的简单理解
May 01 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 Javascript
什么是SOLID
Mar 24 Javascript
Javasipt:操作radio标签详解
Dec 30 #Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 #Javascript
jquery获得keycode的示例代码
Dec 30 #Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 #Javascript
JS对象转换为Jquery对象实现代码
Dec 29 #Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 #Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 #Javascript
You might like
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
php PDO异常处理详解
2016/11/20 PHP
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
拖动时防止选中
2017/02/03 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
python实现的一个p2p文件传输实例
2014/06/04 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
个人廉洁自律承诺书
2014/03/27 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
Python的property属性详细讲解
2022/04/11 Python