在您阅读本文之前,将这个事件列表拉到另一个页面中,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()
and 的另一个常见用途.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()
插件中有一个方法,但它很好地说明了意图)