在你阅读这篇文章之前,把这个事件列表拉到另一个页面,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()
相同,但在捕获和执行处理程序之前,事件冒泡的次数较少。这两个功能的另一个常见用法是,您的类在元素上发生了变化,不再与您最初使用的选择器匹配......使用这些方法,选择器在事件发生时进行评估,如果它匹配,则处理程序运行...因此,不再与选择器匹配的元素很重要,它将不再执行。但是,使用.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()
会触发事件处理程序(但大多数时候不是默认操作,例如,将光标放在单击中的正确位置)。它使事件处理程序按它们绑定的顺序发生(就像本机事件一样),触发本机事件操作,并冒泡 DOM。<textarea>
.triggerHandler()
通常用于不同的目的,在这里您只是尝试触发绑定的处理程序,它不会导致本机事件触发,例如提交表单。它不会冒泡 DOM,并且不可链接(它返回该事件的最后绑定事件处理程序返回的任何内容)。例如,如果你想触发一个事件,但实际上并没有聚焦对象,你只想运行用.focus(fn)
绑定的代码,这将这样做,而.trigger()
会这样做,并且实际上聚焦元素并冒泡。focus
下面是一个真实世界的示例:
$("form").submit(); //actually calling `.trigger('submit');`
这将运行任何提交处理程序,例如jQuery验证插件,然后尝试提交.但是,如果您只想验证,因为它是通过事件处理程序挂接的,但之后不提交,则可以使用.triggerHandler('submit'),
如下所示:<form>
submit
<form>
$("form").triggerHandler('submit');
如果验证检查没有通过,该插件会阻止处理程序通过轰炸来提交表单,但是使用此方法,我们并不关心它的作用。无论它是否中止,我们都不会尝试提交表单,我们只想触发它重新验证,而不执行任何其他操作。(免责声明:这是一个多余的例子,因为插件中有一个方法,但它是一个不错的意图说明).validate()