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 相关文章推荐
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
详解javascript实现瀑布流绝对式布局
Jan 29 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
js选项卡的制作方法
Jan 23 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 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
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
Python二分法搜索算法实例分析
2015/05/11 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
python实现大学人员管理系统
2019/10/25 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
2019/12/17 HTML / CSS
一个C/C++编程面试题
2013/11/10 面试题
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
查摆剖析材料范文
2014/09/30 职场文书
科学育儿宣传标语
2014/10/08 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
学校师德师风整改措施
2014/10/27 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
微信小程序实现轮播图指示器
2022/06/25 Javascript