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