jQuery click，bind，live，delegate，trigger和on功能之间的区别（示例）？

Question

我已经阅读了上每个函数的文档 jQuery officialwebsite，但是以下函数之间没有这样的比较列表：

$().click(fn)
$().bind('click',fn)
$().live('click',fn)
$().delegate(selector, 'click', fn)
$().trigger('click') // UPDATED
$().on('click', selector ,fn); // more UPDATED

请避免任何参考链接。

以上所有功能如何正确发挥作用，在哪种情况下应优先使用？

注意： 如果还有其他具有相同功能或机制的功能，请详细说明。

更新资料

我也看到了一个$.trigger功能。它是否与上述功能类似？

更多更新

现在.on在 v1.7 中添加了，我认为这一方式某种程度上可以涵盖所有上述功能要求。

Answer 1

在阅读本文之前，请将该事件列表拉到另一页，API本身是非常有用的，并且我在下面讨论的所有内容都直接从此页面链接。

首先，.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()，但是事件在捕获和执行处理程序之前冒泡的次数更少。这两种方法的另一个常见用法是说您的类在某个元素上进行了更改，不再与您最初使用的选择器匹配…使用这些方法，选择器将在事件发生时进行评估，如果匹配，则处理程序运行。.so不再与选择器匹配的元素很重要，它将不再执行。随着.click()然而，事件处理程序的DOM元素上绑定的权利，但事实上，它不匹配任何选择来发现这是无关紧要的......该事件被约束，它一直待到该元素消失了，或者处理器已通过删除.unbind()。

然而，对于另一种常见的使用.live()和.delegate()是性能 。如果要处理 大量元素，则将点击处理程序直接附加到每个元素上既昂贵又耗时。在这些情况下，设置 单个处理程序并让冒泡进行工作更为经济，请看一下这个问题所起的巨大作用，这是应用程序的一个很好的例子。

触发 -针对更新的问题

有2个主要的事件处理程序触发函数可用，它们属于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

您可以在此处查看包含这些快捷方式的列表。

至于区别，.trigger()触发事件处理程序（但大多数时候不是默认操作，例如，将光标放在clicked中的正确位置<textarea>）。它使事件处理程序按照绑定的顺序发生（如本机事件将发生），触发本机事件操作，并使DOM冒泡。

.triggerHandler()通常是出于不同的目的，在这里您只是尝试触发绑定的处理程序，它不会导致触发本机事件，例如提交表单。它不会使DOM冒泡，并且不能链接（它返回该事件的最后绑定事件处理程序返回的任何内容）。例如，如果您想触发一个focus事件但实际上并不关注对象，则只想.focus(fn)运行与之绑定的代码，就可以做到这一点，而.trigger()实际上却可以使元素聚焦并冒泡。

这是一个真实的例子：

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

这将运行任何提交处理程序，例如jQuery验证插件，然后尝试提交<form>。但是，如果您 只是
想验证，因为它是通过submit事件处理程序连接的，但<form>之后又没有提交，则可以使用.triggerHandler('submit')，例如：

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

如果验证检查未通过，该插件会通过轰炸来阻止处理程序提交表单，但是通过这种方法，我们不在乎它做什么。无论是中止与否我们不 试图提交表单，我们只是想把它触发重新验证和别的什么也不做。（免责声明:这是一个多余的示例，因为.validate()插件中有一个方法，但这是一个不错的意图说明）