问jQuery `click`，`bind`，`live`，`delegate`，`rigger`和`on`函数有什么区别(举个例子)？

EN

在你读这个之前，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)的快捷方式，它们是等效的。在将处理程序直接绑定到元素时使用它们，如下所示：

$(document).click(function() {
  alert("You clicked somewhere in the page, it bubbled to document");
});

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

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

$(".clickAlert").live('click', function() {
  alert("A click happened");
});

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

$("#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')为常见事件内置了一些快捷方式，例如：

$().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()可以做到这一点，同时也可以真正聚焦元素并使其冒泡起来。

下面是一个真实的例子：

$("form").submit(); //actually calling `.trigger('submit');`

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

$("form").triggerHandler('submit');

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

前两个是等价的。

// The following two statements do the same thing:
$("blah").click( function() { alert( "Click!" ); } );
$("blah").bind( "click", function() { alert( "Click!" ); } ); 

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

$("blah").bind( "click mouseover mouseout", function() { alert( "Click! Or maybe mouse moved." ); } ); 

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

<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方法，而不是每次都重新分配事件处理程序：

<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中的事件有一个有趣的“冒泡”特性。请考虑以下内容：

<div> <a> <b>text</b> </a> </div>

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

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

$("table").delegate( "td", "click", function() { alert( "Click!" ); } );

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

有问题吗？

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

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

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

.on( events [, selector] [, data], handler(eventObject) )
.on( events-map [, selector] [, data] )

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