javascript - jQuery `click` 、 `bind` 、 `live` 、 `delegate` 、 `trigger` 和 `on` 函数之间的区别(举例)？

Question

我已经阅读了 jQuery official website 上每个函数的文档。 ，但以下功能之间没有这样的比较列表:

$().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

在您阅读本文之前，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) 的快捷方式，它们是等价的。在绑定(bind)处理程序时使用它们 直接到一个元素 ，像这样:

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

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

.live() 和 .delegate() 类似， .delegate() 实际使用 .live() 在内部，它们都监听冒泡的事件。 这适用于新旧元素 ，它们以相同的方式冒泡事件。当您的元素可能发生变化时，您可以使用这些，例如添加新行、列表项等。如果您没有将留在页面中且不会在任何时候被替换的父/公共(public)祖先，请使用 .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() 的工作原理几乎相同，但事件在被捕获和执行处理程序之前冒泡的次数较少。这两者的另一个常见用途是说你的类在一个元素上发生了变化，不再匹配你最初使用的选择器......使用这些方法，选择器被评估 事件时 ，如果匹配，则处理程序运行...因此不再匹配选择器的元素很重要，它将不再执行。与 .click() 然而，事件处理程序绑定(bind)在 DOM 元素上，事实上它不匹配用于查找它的任何选择器是无关紧要的......事件被绑定(bind)并且它一直保持到该元素消失，或者处理程序是通过 .unbind() 删除.

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

触发 - 对于更新的问题

有 2 个主要的事件处理程序触发函数可用， 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> )。它使事件处理程序按照它们被绑定(bind)的顺序发生(就像 native 事件一样)，触发 native 事件操作，并在 DOM 中冒泡。

.triggerHandler() 通常是出于不同的目的，在这里您只是尝试触发绑定(bind)处理程序，它不会导致 native 事件触发，例如提交表格。它不会冒泡 DOM，并且它不可链接(它返回该事件的最后绑定(bind)事件处理程序返回的任何内容)。例如，如果您想触发 focus事件但实际上并没有聚焦对象，您只需要与 .focus(fn) 绑定(bind)的代码运行，这会做到这一点，而 .trigger() 会这样做以及实际聚焦元素并冒泡。

这是一个真实世界的例子:

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

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

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

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