您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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()插件中有一个方法,但这是一个不错的意图说明)

JS 2022/1/1 18:17:41 有379人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶