我已经阅读了上每个函数的文档 jQuery officialwebsite,但是以下函数之间没有这样的比较列表:
jQuery officialwebsite
$().click(fn) $().bind('click',fn) $().live('click',fn) $().delegate(selector, 'click', fn) $().trigger('click') // UPDATED $().on('click', selector ,fn); // more UPDATED
请避免任何参考链接。
以上所有功能如何正确发挥作用,在哪种情况下应优先使用?
注意: 如果还有其他具有相同功能或机制的功能,请详细说明。
我也看到了一个$.trigger功能。它是否与上述功能类似?
$.trigger
现在.on在 v1.7 中添加了,我认为这一方式某种程度上可以涵盖所有上述功能要求。
.on
在阅读本文之前,请将该事件列表拉到另一页,API本身是非常有用的,并且我在下面讨论的所有内容都直接从此页面链接。
首先,.click(function)实际上是的快捷方式.bind('click',function),它们是等效的。将处理程序 直接 绑定 到元素时,可以使用它们,例如:
.click(function)
.bind('click',function)
$(document).click(function() { alert("You clicked somewhere in the page, it bubbled to document"); });
如果此元素被替换或丢弃,则该处理程序将不再存在。同样, 运行此代码 以附加处理程序 时 不存在的元素(例如,选择器随后找到它)将无法获取处理程序。
.live()并且.delegate()具有相似的相关性,.delegate()实际上是在.live()内部使用的,它们都监听事件冒泡。 这适用于新元素和旧元素 ,它们以相同的方式起泡事件。当元素可能更改时(例如添加新行,列表项等),可以使用它们。如果没有留在页面中且在任何时候都不会被替换的父/共祖,请使用.live(),例如:
.live()
.delegate()
$(".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()。
.click()
.unbind()
然而,对于另一种常见的使用.live()和.delegate()是性能 。如果要处理 大量元素,则将点击处理程序直接附加到每个元素上既昂贵又耗时。在这些情况下,设置 单个处理程序并让冒泡进行工作更为经济,请看一下这个问题所起的巨大作用,这是应用程序的一个很好的例子。
触发 -针对更新的问题
有2个主要的事件处理程序触发函数可用,它们属于API中相同的“事件处理程序附件”类别,分别是.trigger()和.triggerHandler()。.trigger('eventName')具有一些常见事件内置的快捷方式,例如:
.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冒泡。
<textarea>
.triggerHandler()通常是出于不同的目的,在这里您只是尝试触发绑定的处理程序,它不会导致触发本机事件,例如提交表单。它不会使DOM冒泡,并且不能链接(它返回该事件的最后绑定事件处理程序返回的任何内容)。例如,如果您想触发一个focus事件但实际上并不关注对象,则只想.focus(fn)运行与之绑定的代码,就可以做到这一点,而.trigger()实际上却可以使元素聚焦并冒泡。
focus
.focus(fn)
这是一个真实的例子:
$("form").submit(); //actually calling `.trigger('submit');`
这将运行任何提交处理程序,例如jQuery验证插件,然后尝试提交<form>。但是,如果您 只是 想验证,因为它是通过submit事件处理程序连接的,但<form>之后又没有提交,则可以使用.triggerHandler('submit'),例如:
<form>
submit
.triggerHandler('submit')
$("form").triggerHandler('submit');
如果验证检查未通过,该插件会通过轰炸来阻止处理程序提交表单,但是通过这种方法,我们不在乎它做什么。无论是中止与否我们不 试图提交表单,我们只是想把它触发重新验证和别的什么也不做。(免责声明:这是一个多余的示例,因为.validate()插件中有一个方法,但这是一个不错的意图说明)
.validate()