Teilen Sie Beispiele für die Unterschiede zwischen .bind(), .live(), .delegate() und .on() in Jquery

Dieser Artikel teilt Ihnen hauptsächlich die Unterschiede zwischen .bind(), .live(), .delegate() und .on() in Jquery mit. .bind() und .live werden in unserer täglichen Entwicklung häufig verwendet (). , .delegate() und .on(), einige Schüler haben einige Zweifel an diesen vier, daher stellt Ihnen der folgende Artikel hauptsächlich .bind(), .live(), .delegate() in Jquery vor) und .on( ), ich hoffe, es kann allen helfen.

Einführung

Kürzlich habe ich erfahren, dass viele Webentwickler große Zweifel an den Methoden .bind(), .live(), .delegate() und .on() in jquery haben . Diese Verwirrungen drehen sich in der Regel darum, was die wirklichen Unterschiede zwischen ihnen sind und wann sie verwendet werden sollten. Der folgende Artikel gibt Ihnen eine detaillierte Einführung in die Unterschiede zwischen diesen vier Methoden. Werfen wir zunächst einen Blick auf die detaillierte Einführung:

Bevor wir sie verstehen Methoden: Nehmen wir zunächst einen allgemeinen HTML-Code als Beispiel, um JQuery-Beispielmethoden zu schreiben.

<ul id="members" data-role="listview" data-filter="true">
 <!-- ... 其他li ... -->
 <li>
 <a href="detail.html?id=10" rel="external nofollow" >
  <h3>John Resig</h3>
  <p><strong>jQuery Core Lead</strong></p>
  <p>Boston, United States</p>
 </a>
 </li>
 <!-- ... 其他li ... -->
</ul>

Verwenden Sie die Bind-Methode

.bind()-Methode, um den Ereignistyp und einen Ereignishandler direkt im ausgewählten DOM-Element zu registrieren. Diese Methode wird seit langem verwendet und hat in dieser Zeit verschiedene browserübergreifende Probleme sehr gut gelöst. Wenn es zum Verbinden von Ereignishandlern verwendet wird, ist es immer noch sehr prägnant, es gibt jedoch auch einige Leistungsprobleme, die im Folgenden aufgeführt werden. Die Methode

/* .bind() 方法将事件类型和一个事件处理函数直接注册到了被选中的DOM元素中。 
 .click() 方法只是.bind() 方法的简写。
*/

$( "#members li a" ).bind( "click", function( e ) {} ); 
$( "#members li a" ).click( function( e ) {} );

.bind() verbindet den Event-Handler mit allen passenden Tags. Dieser Ansatz ist nicht gut. Dabei werden die zusätzlichen Event-Handler nicht nur implizit über alle übereinstimmenden Elemente hinweg iteriert, sondern dieser Vorgang ist auch sehr verschwenderisch (redundant), da dieselben Event-Handler immer wieder zu allen passenden Tags hinzugefügt werden.

Vorteile:

• Geeignet für verschiedene Browser

• Die Anbindung von Event-Handlern ist sehr komfortabel und schnell

• Sie können .click(), .hover() und andere Kurzmethoden verwenden, um die Ereignisverarbeitungsfunktion bequemer zu verbinden

• Für einen einfachen ID-Selektor verwenden Sie The Die Methode .bind() kann nicht nur die Ereignisverarbeitungsfunktion schnell verbinden, sondern auch, wenn das Ereignis ausgelöst wird, wird die Ereignisverarbeitungsfunktion fast sofort aufgerufen

Nachteile:

• Diese Methode hängt alle Event-Handler an alle übereinstimmenden Elemente an

• Sie können Elemente mit demselben Selektor nicht dynamisch abgleichen

• Beim Betrieb einer großen Anzahl übereinstimmender Elemente treten Leistungsprobleme auf

• Der Anhängevorgang wird in der frühen Phase durchgeführt, was beim Laden der Seite zu Leistungsproblemen führen kann

Verwendung der Live-Methode Die

.live()-Methode nutzt das Konzept der Ereignisdelegation, um ihre sogenannte „Magie“ umzusetzen. Sie rufen die Methode live() genauso einfach auf wie die Methode bind(). Unter der Oberfläche ist die Methode .live() jedoch ganz anders implementiert als die vorherige. Die Methode .live() hängt die mit dem Ereignishandler verknüpften Selektor- und Ereignisinformationen an das Stammelement des Dokuments (d. h. Dokument) an. Durch die Registrierung von Ereignisinformationen im Dokument ermöglicht dieser Ereignishandler allen Ereignissen, die zum Dokument gelangen, den Aufruf des Dokuments (z. B. delegierte, weitergegebene Ereignisse). Sobald ein Ereignis zum Dokumentelement gelangt, verwendet JQuery den Selektor oder die Ereignismetadaten, um zu bestimmen, welcher Ereignishandler aufgerufen werden soll, sofern einer vorhanden ist. Diese zusätzliche Arbeit wird sich in gewisser Weise auf die Leistung während der Benutzerinteraktion auswirken, der anfängliche Prozess der Registrierung von Ereignissen geht jedoch recht schnell vonstatten. Ein Vorteil des

/* 方法将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素（即document） 
 ( "#members li a" & "click" ) */

$( "#members li a" ).live( "click", function( e ) {} );

.bind()-Beispiels im Vergleich zum obigen Beispiel der bind()-Methode besteht darin, dass der Ereignishandler nur einmal und nicht mehrmals an das Dokumentelement angehängt wird. Dies ist nicht nur schneller, sondern reduziert auch die Leistungsverschwendung. Allerdings bringt die Verwendung dieser Methode auch viele Probleme mit sich, die im Folgenden aufgeführt sind.

Vorteile:

• Alle Event-Handler werden nur einmal registriert, anstatt sich mehrmals wie bind() zu registrieren

• Es ist sehr praktisch, die bind()-Methode auf die live()-Methode zu aktualisieren. Sie müssen nur „bind“ durch „live“ ersetzen

• Die dynamisch hinzugefügten Elemente DOM wird auch auf magische Weise abgeglichen, da die tatsächlichen Ereignisinformationen im Dokumentelement registriert sind

• Sie können den Ereignishandler verbinden, bevor das Dokument geladen wird, sodass Sie ihn besser nutzen können Ihre potenziell nutzlose Zeit

Nachteile:

• Diese Methode ist in Jquery 1.7 und späteren Versionen veraltet, Sie sollten die Verwendung in Ihrem Unternehmen nach und nach aufgeben Code

• Kettenoperationen werden bei Verwendung dieser Methode nicht korrekt unterstützt und es können einige Fehler auftreten

Die von

• durchgeführte Matching-Operation ist grundsätzlich nutzlos, weil Es wird nur verwendet, um die Event-Handler-Funktion für das Dokumentelement

• zu registrieren. Die Verwendung der Methode event.stopPropogation() wird nicht verwendet, da Ereignisse immer an das Dokumentelement

  delegiert werden

• 因为所有的选择器或者事件信息都被附加到document元素上了，所以一旦有一个事件要调用某个事件处理函数，Jquery会在一大堆储存的元数据中使用matchesSelector方法来决定哪一个事件处理函数将会被调用，如果这个函数有的话。

• 因为你所连接的事件总是被委托到document上，所如果你的DOM的层级很深的话，这会导致一定的性能问题

使用Delegate方法

.delegate()方法与live()方式实现方式相类似，它不是将选择器或者事件信息附加到document，而是让你指定附加的元素。就像是live()方法一样，这个方法使用事件委托来正确地工作。

如果你跳过了前面关于 .live() 方法的介绍，你可能要回去重新看看它，因为这里涉及到之前我所阐述的一些内部逻辑

/* .delegate() 方法会将选择器和事件信息 ( "li a" & "click" ) 附加到你指定的元素上 ( "#members" )。
*/

$( "#members" ).delegate( "li a", "click", function( e ) {} );

.delegate()方法十分强大。在上面这个例子中，与事件处理函数关联的选择器和事件信息将会被附加到( #members" )这个元素上。这样做比使用live()高效多了，因为live()方法总是将与事件处理函数关联的选择器和事件信息附加到document元素上。另外，使用.delegate()方法解决许多其他问题。请参阅下方列出的详细信息。

优点:

• 你可以选择将选择器或者事件信息附加到指定的元素。

• 匹配操作实际上在前面并没有执行，而是用来注册到指定的元素。

• 链式操作可以得到正确的支持

• Jquery仍然需要迭代这些选择器或者事件信息来匹配元素，不过因为你可以选择哪一个元素作为根元素，所以筛选的量会大幅减少

• 因为这项技术使用了事件委托机制，它可以匹配到被动态地添加到DOM的元素

• 你可以在文档加载完之前连接事件处理函数

缺点:

• 从.bind()方法不可以直接升级到.delegate()方法

• Jquery仍然需要使用marchesSelector方法在附加到指定根元素的选择器或者事件信息中筛选决定哪一个事件处理函数会被调用。然而，附加到指定根元素的元数据会比使用live()方法的时候要小得多。

• 当操作大量匹配的元素时会有性能方面的问题

• 附加操作是在前期完成的,这可能导致页面加载时存在性能问题

使用On方法

你知道吗，在Jquery 1.7版本中.bind() ， .live() 和.delegate()方法只需要使用.on()方法一种方式来调用它们。当然.unbind() ， .die() 和.undelegate()方法也一样。一下代码片段是从Jquery 1.7版本的源码中截取出来的

bind: function( types, data, fn ) {
 return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
 return this.off( types, null, fn );
},

live: function( types, data, fn ) {
 jQuery( this.context ).on( types, this.selector, data, fn );
 return this;
},
die: function( types, fn ) {
 jQuery( this.context ).off( types, this.selector || "**", fn );
 return this;
},

delegate: function( selector, types, data, fn ) {
 return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
 return arguments.length == 1 ? 
  this.off( selector, "**" ) : 
  this.off( types, selector, fn );
}

考虑到这一点，使用.on()方法看起来像以下方式一样...

/* Jquery的 .bind() , .live() 和 .delegate() 方法只需要使用`.on()`方法一种方式来调用它们 */

// Bind
$( "#members li a" ).on( "click", function( e ) {} ); 
$( "#members li a" ).bind( "click", function( e ) {} );

// Live
$( document ).on( "click", "#members li a", function( e ) {} ); 
$( "#members li a" ).live( "click", function( e ) {} );

// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} ); 
$( "#members" ).delegate( "li a", "click", function( e ) {} );

你可能注意到了，我如何使用.on()方法决定了它如何调用其他方法。你可以认为.on()方法被具有不同签名的方法”重载“了，而这些方法实现了不同的事件绑定的连接方式。 .on()方法的出现为API带来了很多方面的一致性，并希望让事情变得不那么混乱。

优点:

• 使各种事件绑定方法一致。

• 因为在Jquery源码中.bind() ， .live() 和.delegate()方法实际上是调用了此方法，因此简化了jQuery代码库并删除了一级重定向。

• 这种方式仍然提供了使用.delegate()方法的优点，并且仍然提供对.bind()方法的支持，如果你需要的话。

缺点:

• 给人带来了一些疑惑，因为方法的实际执行方式将根据你如何调用方法而改变。

总结

如果你对不同的绑定事件方法有所迷惑，那么不要担心，因为API发展了一段时间了，有很多前人的经验可以借鉴。也有很多人将这些方法视为魔法，不过一旦你了解了他们工作背后的原理，将帮助您了解如何更好地处理项目。
以下是这篇文章的精华所在...

• 使用.bind()方法非常浪费性能因为它把同一个事件处理函数附加到了每一个匹配的元素上

• 你应该停止使用.live()方法因为它被弃用了同时也会带来很多问题

• 使用.delegate()方法会给你带来很多好处当你需要解决一些性能上的问题和对动态添加的元素作出处理

• 新的.on()方法其实就是模拟.bind() ， .live() 和.delegate()实现的语法糖，具体取决于你如何调用它

• 新的方向是使用新的.on()方法。先熟悉语法，并开始在你的所有的Jquery 1.7版本以上的项目使用它吧！

Haben Sie zu den oben aufgeführten Vor- oder Nachteilen noch etwas Neues hinzuzufügen? Haben Sie kürzlich damit begonnen, die Methode „delegate()“ zu verwenden? Was halten Sie von der neuen .on()-Methode? Teilen Sie mir Ihre Meinung in den Kommentaren mit! Danke!

Verwandte Empfehlungen:

Detaillierte Erläuterung der Verwendung der jQuery.on()-Funktion

Detaillierte Erläuterung der Verwendung der jQuery.on()-Funktion Beispiele

Kurze Übersicht über das JQuery-Ereignis binding.on() und application_jquery

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für die Unterschiede zwischen .bind(), .live(), .delegate() und .on() in Jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!