栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

jQuery click,bind,live,delegate,trigger和on功能之间的区别(示例)?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/670483.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号