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

wenyiweb 发布于2019-08-19 17:59 / 3313人阅读

摘要：事件委托方法能对一个还没有添加进的元素有效，是由于使用了事件委托绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。执行由绑定的特殊的事件处理函数。这个事件处理函数首先检测事件对象的来确定是不是需要继续。

概述
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事件传递给

来处理
2、由于没有事件处理函数直接绑定在

上，所以事件冒泡到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();
 });

GPU云服务器云服务器 jquery中animate用法互联网中域名解析方法 live()方法 java中枚举的用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79057.html

jQuery 源码系列（十一）event 总体概述

摘要：而事件委托的概念事件目标自身不处理事件，而是将其委托给父元素或祖先元素或根元素，而借助事件的冒泡性质由内向外来达到最终处理事件。而且一旦出现，局部刷新导致重新绑定事件。函数的用法，代表要移除的事件，表示选择的，表示事件处理函数。欢迎来我的专栏查看系列文章。这次的内容是来介绍关于 jQuery 的事件委托。不过在之前呢有必要先来了解一下 JS 中的事件委托与冒泡，我之前也写过类似的博...

liujs 2019-08-20 14:36 评论0 收藏0
收集的jQuery代码片段

摘要：如何创建嵌套的过滤器允许你减少集合中的匹配元素的过滤器，只剩下那些与给定的选择器匹配的部分。在这种情况下，查询删除了任何没有包含为的子节点。如何创建嵌套的过滤器 //允许你减少集合中的匹配元素的过滤器， //只剩下那些与给定的选择器匹配的部分。在这种情况下， //查询删除了任何没（:not）有（:has） //包含class为selected（.sel...

amuqiao 2019-08-19 18:48 评论0 收藏0
深入理解JQuery中的on方法（事件委派机制）

摘要：它是一个过滤器的作用，只有被选中元素的后代元素才会触发事件。替换是引入的，目的是通过祖先元素来代理委派后代元素的事件绑定问题，某种程度上和优点相似。相关资料深入理解新的绑定事件机制方法的使用新的事件绑定机制前言在开发项目的时候，JQuery的使用极其广泛，如果脑海中没有一点JQuery的基础知识，随性编写，那么就有可能造成bug问题。JQuery 1.4版本之后新增了on方法，这个...

ckllj 2019-06-27 14:17 评论0 收藏0
深入理解JQuery中的on方法（事件委派机制）

摘要：它是一个过滤器的作用，只有被选中元素的后代元素才会触发事件。替换是引入的，目的是通过祖先元素来代理委派后代元素的事件绑定问题，某种程度上和优点相似。相关资料深入理解新的绑定事件机制方法的使用新的事件绑定机制前言在开发项目的时候，JQuery的使用极其广泛，如果脑海中没有一点JQuery的基础知识，随性编写，那么就有可能造成bug问题。JQuery 1.4版本之后新增了on方法，这个...

jindong 2019-08-20 10:22 评论0 收藏0
深入理解JQuery中的on方法（事件委派机制）

摘要：它是一个过滤器的作用，只有被选中元素的后代元素才会触发事件。替换是引入的，目的是通过祖先元素来代理委派后代元素的事件绑定问题，某种程度上和优点相似。相关资料深入理解新的绑定事件机制方法的使用新的事件绑定机制前言在开发项目的时候，JQuery的使用极其广泛，如果脑海中没有一点JQuery的基础知识，随性编写，那么就有可能造成bug问题。JQuery 1.4版本之后新增了on方法，这个...

ralap 2019-08-14 14:30 评论0 收藏0