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

2020/11/17 20:22 · javascript ·  · 0评论

我已经阅读了上每个函数的文档 jQuery official website,但是以下函数之间没有这样的比较列表:

$().click(fn)
$().bind('click',fn)
$().live('click',fn)
$().delegate(selector, 'click', fn)
$().trigger('click') // UPDATED
$().on('click', selector ,fn); // more UPDATED

请避免任何参考链接。

以上所有功能如何正确发挥作用,在哪种情况下应优先使用?

注意:如果还有其他具有相同功能或机制的功能,请详细说明。

更新资料

我也看到了一个$.trigger功能。它的工作原理与上述功能相似吗?

更多更新

现在.onv1.7中添加了,我认为这以某种方式可以同时满足上述所有功能要求。

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

前两个是等效的。

// The following two statements do the same thing:
$("blah").click( function() { alert( "Click!" ); } );
$("blah").bind( "click", function() { alert( "Click!" ); } ); 

但是,通过指定多个以空格分隔的事件名称,第二个事件可用于同时绑定到多个事件:

$("blah").bind( "click mouseover mouseout", function() { alert( "Click! Or maybe mouse moved." ); } ); 

.live方法更有趣。考虑以下示例:

<a class="myLink">A link!</a>
<a id="another">Another link!</a>

<script>
    $("a.myLink").click( function() { alert( 'Click!' ); } );

    $("a#another").addClass( "myLink" );
</script>

在脚本的第二行执行之后,第二个链接还将具有CSS类“ myLink”。但是它将没有事件处理程序,因为在附加事件时它没有该类。

现在考虑您希望它是相反的方法:每当类“ myLink”的链接出现在页面上的某个位置时,您希望它自动具有相同的事件处理程序。当您拥有某种类型的列表或表时,这是很常见的,您可以在其中动态添加行或单元格,但又希望它们的行为相同。不必每次都重新分配事件处理程序,而可以使用以下.live方法:

<a class="myLink">A link!</a>
<a id="another">Another link!</a>

<script>
    $("a.myLink").live( "click", function() { alert( 'Click!' ); } );

    $("a#another").addClass( "myLink" );
</script>

在此示例中,第二个链接一旦获得“ myLink”类,也将获得事件处理程序。魔法!:-)

当然,这不是字面意思。什么.live确实是处理程序不附加到指定元素本身,而是对HTML树(“身体”元素)的根源。DHTML中的事件具有“冒泡”这一有趣的功能。考虑一下:

<div> <a> <b>text</b> </a> </div>

如果单击“文本”,则首先<b>元素将获得“单击”事件。之后,<a>元素将获得一个“ click”事件。之后,<div>元素将获得一个“ click”事件。依此类推-一直到<body>元素。这就是jQuery将捕获事件并查看是否有任何“实时”处理程序适用于首先导致事件的元素的地方。整齐!

And finally, the .delegate method. It simply takes all the children of your element that conform to the given selector and attach a "live" handler to them. Take a look:

$("table").delegate( "td", "click", function() { alert( "Click!" ); } );

// Is equivalent to:
$("table").each( function() {
    $(this).find( "td" ).live( "click", function() { alert( "Click!" ); } );
} );

Questions?

从jQuery 1.7开始,不推荐使用.live()方法。如果您使用的是jQuery版本<1.7以下,则官方建议在.live()上使用.delegate()。

.live()现在已替换为.on()。

最好直接访问jQuery网站以获取更多信息,但是这是.on()方法的当前版本:

.on( events [, selector] [, data], handler(eventObject) )
.on( events-map [, selector] [, data] )

http://api.jquery.com/on/

$().click(fn) and $().bind('click', fn) are identical at first sight, but the $.bind version is more powerful for two reasons:

  1. $().bind() allows you to assign one handler to multiple events, for example, $().bind('click keyup', fn).
  2. $().bind() supports namespaced events - a powerful feature if you want to remove (unbind) only certain event handlers that an element is bound to - read more in Namespaced Events.

Live vs delegate: this has already been answered in the other replies.

This is where reading the API might help. However, I know off the top of my head, so you can continue being lazy (yay!).

$('#something').click(fn);
$('#something').bind('click',fn);

There's no difference here (that I know of). .click is simply a convenience/helper method to .bind('click'

// even after this is called, all <a>s in
// <div class="dynamic_els"> will continue
// to be assigned these event handlers

$('div.dynamic_els a').live(‘click’,fn);

This is very different, as .live adds events to the selector you pass in (which you haven't here) and continues to look at the DOM as nodes are inserted / removed

$('#some_element').delegate('td','click',fn);

This is only different because of the way you're assigning event handlers. .delegate is centered on DOM event bubbling. The basic principle is that every event bubbles upward through the DOM tree until it reaches the root element (document or window or <html> or <body>, I can't remember exactly).

Either way, you're binding an onclick handler to a all the <td>s within $('#some_element') (you must specify a selector, though you could say $(document)). When one of its children is clicked, the event bubbles up to the <td>. You can then extract the source element of the event (which jQuery does for you automagically).

This is useful when there are tons of elements and you only have only a few (or one central) point[s] that these events will go through. This saves the browser effort and memory to consolidate these event handlers into less objects.

本文地址:http://javascript.askforanswer.com/jquery-clickbindlivedelegatetriggerheongongnengzhijiandequbieshili.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!