Partager des exemples des différences entre .bind(), .live(), .delegate() et .on() dans Jquery

Cet article partage principalement avec vous les différences entre .bind(), .live(), .delegate() et .on() dans Jquery.bind() et .live sont souvent utilisés dans notre développement quotidien () , .delegate() et .on(), certains étudiants ont des doutes sur ces quatre, donc l'article suivant vous présente principalement .bind(), .live(), .delegate() dans Jquery) et .on( ), j'espère que cela pourra aider tout le monde.

Introduction

Récemment, j'ai appris que de nombreux développeurs Web ont beaucoup de doutes sur les méthodes .bind() .live() .delegate() et .on() dans jquery . Ces questions tournent généralement autour des véritables différences entre eux et du moment où les utiliser. L'article suivant vous donnera une introduction détaillée aux différences entre ces quatre méthodes. Chaque méthode est présentée en détail. Sans plus tarder, jetons un coup d'œil à l'introduction détaillée :

Allons plus loin. méthodes, prenons d'abord un morceau de code HTML commun comme exemple pour écrire des exemples de méthodes jquery.

<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>

Utilisez la méthode Bind

.bind() pour enregistrer le type d'événement et un gestionnaire d'événement directement dans l'élément DOM sélectionné. Cette méthode est utilisée depuis le plus longtemps et, au cours de cette période, elle a très bien résolu divers problèmes entre navigateurs. Lorsque vous l'utilisez pour connecter des gestionnaires d'événements, il reste très concis, mais il existe également des problèmes de performances, qui seront répertoriés ci-dessous. La méthode

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

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

.bind() connectera le gestionnaire d'événements à toutes les balises correspondant à a. Cette approche n'est pas bonne. Ce faisant, non seulement il itère implicitement les gestionnaires d'événements supplémentaires sur tous les éléments correspondants, mais cette opération est très inutile (redondante) car ces mêmes gestionnaires d'événements sont ajoutés encore et encore à toutes les balises correspondantes supérieures.

Avantages :

• Convient à différents navigateurs

• La connexion des gestionnaires d'événements est très pratique et rapide

• Vous pouvez utiliser .click(), .hover() et d'autres méthodes abrégées pour connecter plus facilement la fonction de traitement d'événements

• Pour un simple sélecteur d'ID, utilisez The La méthode .bind() peut non seulement connecter rapidement la fonction de traitement d'événement, mais également lorsque l'événement est déclenché, la fonction de traitement d'événement est appelée presque immédiatement

Inconvénients :

• Cette méthode attachera tous les gestionnaires d'événements à tous les éléments correspondants

• Vous ne pouvez pas faire correspondre dynamiquement les éléments avec le même sélecteur

• Il y aura des problèmes de performances lors de l'utilisation d'un grand nombre d'éléments correspondants

• Les opérations d'ajout sont effectuées au début, ce qui peut entraîner des problèmes de performances lors du chargement de la page

Utilisation de la méthode Live La méthode

.live() utilise le concept de délégation d'événements pour mettre en œuvre sa soi-disant « magie ». Vous appelez la méthode live() aussi facilement que la méthode bind(). Cependant, sous la surface, la méthode .live() est implémentée de manière très différente de la première. La méthode .live() attache le sélecteur et les informations d'événement associées au gestionnaire d'événements à l'élément racine du document (c'est-à-dire le document). En enregistrant les informations d'événement sur le document, ce gestionnaire d'événements permettra à tous les événements qui remontent dans le document de l'appeler (par exemple, les événements délégués et propagés). Une fois qu'un événement apparaît dans l'élément de document, JQuery utilisera le sélecteur ou les métadonnées de l'événement pour déterminer quel gestionnaire d'événements doit être appelé, s'il en existe un. Ce travail supplémentaire aura un certain impact sur les performances lors de l'interaction de l'utilisateur, mais le processus initial d'enregistrement des événements est assez rapide. L'un des avantages de l'exemple

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

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

.bind() par rapport à l'exemple de méthode bind() ci-dessus est qu'il n'attache le gestionnaire d'événements à l'élément de document qu'une seule fois, plutôt que plusieurs fois. Non seulement cela est plus rapide, mais cela réduit également le gaspillage de performances. Cependant, l’utilisation de cette méthode entraîne également de nombreux problèmes, répertoriés ci-dessous.

Avantages :

• Tous les gestionnaires d'événements ne seront enregistrés qu'une seule fois, au lieu de s'inscrire plusieurs fois comme bind()

• Il est très pratique de mettre à niveau la méthode bind() vers la méthode live(), il vous suffit de remplacer "bind" par "live"

• Ceux qui sont des éléments ajoutés dynamiquement au DOM sera également mis en correspondance comme par magie, car les informations réelles sur l'événement sont enregistrées sur l'élément du document

• Vous pouvez connecter le gestionnaire d'événements avant le chargement du document, ce qui peut vous aider à mieux utiliser votre temps potentiellement inutile

Inconvénients :

• Cette méthode est obsolète dans Jquery 1.7 et versions ultérieures, vous devriez progressivement renoncer à l'utiliser dans votre code

• Les opérations en chaîne ne sont pas correctement prises en charge lors de l'utilisation de cette méthode, et certaines erreurs peuvent survenir

L'opération de correspondance effectuée par

• est fondamentalement inutile car il est uniquement utilisé pour enregistrer la fonction de gestionnaire d'événements sur l'élément de document

• L'utilisation de la méthode event.stopPropogation() ne sera pas utilisée car les événements sont toujours délégués à l'élément de document

• 因为所有的选择器或者事件信息都被附加到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版本以上的项目使用它吧！

Avez-vous quelque chose de nouveau à ajouter aux avantages ou inconvénients énumérés ci-dessus ? Avez-vous récemment commencé à utiliser la méthode délégué() ? Que pensez-vous de la nouvelle méthode .on() ? Faites-moi part de vos impressions dans les commentaires ! Merci!

Recommandations associées :

Explication détaillée de l'utilisation de la fonction jQuery.on()

Explication détaillée de l'utilisation de la fonction jQuery.on() exemples

Événement JQuery bind.on() bref aperçu et application_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!