首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >jQuery `click`,`bind`,`live`,`delegate`,`rigger`和`on`函数有什么区别(举个例子)?

jQuery `click`,`bind`,`live`,`delegate`,`rigger`和`on`函数有什么区别(举个例子)?
EN

Stack Overflow用户
提问于 2010-06-02 12:03:39
回答 5查看 46.1K关注 0票数 140

我已经阅读了jQuery official website上每个函数的文档,但以下函数之间没有这样的比较清单:

代码语言:javascript
复制
$().click(fn)
$().bind('click',fn)
$().live('click',fn)
$().delegate(selector, 'click', fn)
$().trigger('click') // UPDATED
$().on('click', selector ,fn); // more UPDATED

请避免任何引用链接。

上述所有函数究竟是如何工作的,在哪种情况下应该优先使用哪种函数?

注意:如果有任何其他函数具有相同的功能或机制,请详细说明。

更新

我还看到了一个$.trigger函数。它的工作原理与上面的函数相似吗?

更多更新

现在在v1.7中添加了.on,我认为这个版本以某种方式涵盖了上述所有功能需求。

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2010-06-02 12:09:30

在你读这个之前,pull this list of events up in another page, the API itself is tremendously helpful, and all of what I'm discussing below is linked directly from this page

首先,.click(function)从字面上来说是.bind('click', function)的快捷方式,它们是等效的。在将处理程序直接绑定到元素时使用它们,如下所示:

代码语言:javascript
复制
$(document).click(function() {
  alert("You clicked somewhere in the page, it bubbled to document");
});

如果该元素被替换或丢弃,则该处理程序将不再存在。此外,当运行来附加处理程序时,不在那里的元素(例如,选择器找到了它)将不会获得处理程序。

.live().delegate()是相似的关系,.delegate()实际上在内部使用.live(),它们都监听要冒泡的事件。对于新的和旧的元素,这是有效的,它们以相同的方式冒泡事件。如果您的元素可能发生更改,例如添加新行、列表项等,则可以使用这些元素。如果您没有留在页面中且在任何时候都不会被替换的父/公共祖先,请使用.live(),如下所示:

代码语言:javascript
复制
$(".clickAlert").live('click', function() {
  alert("A click happened");
});

但是,如果你确实有一个父元素没有被替换(所以它的事件处理程序不会被取代),你应该用.delegate()来处理它,如下所示:

代码语言:javascript
复制
$("#commonParent").delegate('.clickAlert', 'click', function() {
  alert("A click happened, it was captured at #commonParent and this alert ran");
});

这与.live()的工作原理几乎相同,但在捕获和执行处理程序之前,事件冒泡的次数较少。这两种方法的另一个常见用法是,假设您的类更改了一个元素,不再与最初used...with这些方法的选择器匹配,在发生时,选择器的计算结果为,如果匹配,则runs...so元素的处理程序不再与选择器匹配,它将不再执行。然而,对于.click(),事件处理程序直接绑定在DOM元素上,它与用于查找irrelevant...the事件的选择器不匹配的事实是绑定的,它将一直保留到该元素消失,或者通过.unbind()删除处理程序。

performance.是.live().delegate()的另一个常见用法如果您要处理大量元素,那么将click处理程序直接附加到每个元素是非常昂贵和耗时的。在这些情况下,更经济的做法是设置一个处理程序,让冒泡来完成工作,take a look at this question where it made a huge difference,这是应用程序的一个很好的例子。

触发-针对更新后的问题

有两个主要的事件处理程序触发函数可用,they fall under the same "Event Handler Attachment" category in the API,它们是.trigger().triggerHandler().trigger('eventName')为常见事件内置了一些快捷方式,例如:

代码语言:javascript
复制
$().click(fn); //binds an event handler to the click event
$().click();   //fires all click event handlers for this element, in order bound

You can view a listing including these shortcuts here

至于不同之处,.trigger()会触发事件处理程序(但大多数情况下不是默认操作,例如将光标放在单击的<textarea>中的正确位置)。它使事件处理程序按照绑定的顺序出现(就像本机事件一样),激发本机事件操作,并使DOM冒泡。

.triggerHandler()通常有不同的用途,在这里你只是尝试触发绑定的处理程序,它不会导致本机事件触发,例如提交表单。它不会在DOM中冒泡,也不是链式的(它返回该事件的最后绑定的事件处理程序返回的任何内容)。例如,如果您想要触发一个focus事件,但实际上并不关注对象,那么您只需要运行与.focus(fn)绑定的代码,这就可以做到这一点,而.trigger()可以做到这一点,同时也可以真正聚焦元素并使其冒泡起来。

下面是一个真实的例子:

代码语言:javascript
复制
$("form").submit(); //actually calling `.trigger('submit');`

这将运行任何提交处理程序,例如jQuery validation plugin,然后尝试提交<form>。但是,如果您只是想验证,因为它是通过submit事件处理程序连接的,而不是随后提交<form>,您可以使用.triggerHandler('submit'),如下所示:

代码语言:javascript
复制
$("form").triggerHandler('submit');

如果验证检查没有通过,插件会通过轰炸来防止处理程序提交表单,但是使用这种方法,我们并不关心它做了什么。无论它是否中止,我们并不是试图提交表单,我们只是想触发它重新验证,而不做其他任何事情。(免责声明:这是一个多余的例子,因为插件中有一个.validate()方法,但它很好地说明了意图)

票数 163
EN

Stack Overflow用户

发布于 2010-06-02 12:17:58

前两个是等价的。

代码语言:javascript
复制
// The following two statements do the same thing:
$("blah").click( function() { alert( "Click!" ); } );
$("blah").bind( "click", function() { alert( "Click!" ); } ); 

但是,通过指定几个空格分隔的事件名称,第二个可用于同时绑定到多个事件:

代码语言:javascript
复制
$("blah").bind( "click mouseover mouseout", function() { alert( "Click! Or maybe mouse moved." ); } ); 

.live方法更有趣。考虑以下示例:

代码语言:javascript
复制
<a class="myLink">A link!</a>
<a id="another">Another link!</a>

<script>
    $("a.myLink").click( function() { alert( 'Click!' ); } );

    $("a#another").addClass( "myLink" );
</script>

在脚本的第二行执行之后,第二个链接也将有一个CSS类"myLink“。但是它不会有事件处理程序,因为附加事件时它没有类。

现在,考虑到您希望它是另一种情况:每当页面上出现一个带有"myLink“类的链接时,您希望它自动具有相同的事件处理程序。当您有某种类型的列表或表格时,这是非常常见的,您可以动态添加行或单元格,但希望它们都以相同的方式运行。您可以使用.live方法,而不是每次都重新分配事件处理程序:

代码语言:javascript
复制
<a class="myLink">A link!</a>
<a id="another">Another link!</a>

<script>
    $("a.myLink").live( "click", function() { alert( 'Click!' ); } );

    $("a#another").addClass( "myLink" );
</script>

在本例中,第二个链接也将在获得"myLink“类后立即获得事件处理程序。魔术!:-)

当然,这不是字面意思。.live真正做的不是将处理程序附加到指定的元素本身,而是附加到HTML树的最底层( "body“元素)。DHTML中的事件有一个有趣的“冒泡”特性。请考虑以下内容:

代码语言:javascript
复制
<div> <a> <b>text</b> </a> </div>

如果你点击"text",那么首先元素将会得到一个" click“事件。在此之后,该元素将获得一个"click“事件。在此之后,该元素将获得一个"click“事件。以此类推--一直到元素。这就是jQuery将捕获事件并查看是否有任何“活动”处理程序应用于最初导致事件的元素的地方。干净利落!

最后是.delegate方法。它只接受元素中所有符合给定选择器的子元素,并为它们附加一个"live“处理程序。看一看:

代码语言:javascript
复制
$("table").delegate( "td", "click", function() { alert( "Click!" ); } );

// Is equivalent to:
$("table").each( function() {
    $(this).find( "td" ).live( "click", function() { alert( "Click!" ); } );
} );

有问题吗?

票数 28
EN

Stack Overflow用户

发布于 2012-03-18 23:21:46

从jQuery 1.7开始,不推荐使用.live()方法。如果您使用的是低于1.7的jQuery版本,那么正式建议您使用.delegate()而不是.live()。

现在已经用.on()替换了.live()。

有关详细信息,最好直接访问jQuery站点,但以下是.on()方法的最新版本:

代码语言:javascript
复制
.on( events [, selector] [, data], handler(eventObject) )
.on( events-map [, selector] [, data] )

http://api.jquery.com/on/

票数 8
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/2954932

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档