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

大佬教程收集整理的这篇文章主要介绍了jQuery click，bind，live，delegate，trigger和on功能之间的区别（示例）？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

在阅读本文之前，请将该事件列表拉到另一页，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()插件中有一个方法，但这是一个不错的意图说明）

解决方法

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

大佬总结

以上是大佬教程为你收集整理的jQuery click，bind，live，delegate，trigger和on功能之间的区别（示例）？全部内容，希望文章能够帮你解决jQuery click，bind，live，delegate，trigger和on功能之间的区别（示例）？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。