Explication détaillée des étapes pour ajouter dynamiquement des événements de clic dans jquery

Cette fois, je vais vous apporter une explication détaillée des étapes pour ajouter dynamiquement des événements de clic avec jquery Quelles sont les précautions pour ajouter dynamiquement des événements de clic avec jquery. Voici les pratiques. cas. Jetons un coup d'oeil.

Lorsque nous essayons de lier certains événements à des éléments DOM, nous utilisons généralement les quatre méthodes suivantes
bind(),on(),live(),delegate()Vous devez utiliser les deux premières méthodes supplémentaires. Voici ma compréhension des quatre méthodes :

• Bind() : .bind() est la méthode de liaison la plus directe, qui liera la fonction spécifiée et Les événements sont transférés vers le DOM. Cette méthode résout très bien le problème de compatibilité du navigateur dans la gestion des événements, mais cette méthode présente encore quelques problèmes. Code :

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

Les deux lignes de code ci-dessus accomplissent la même tâche, qui consiste à ajouter le gestionnaire d'événements à tous les éléments correspondant à un. Il y a ici des problèmes d'efficacité. D'une part, nous ajoutons des événements de clic à toutes les balises. D'autre part, c'est également un gaspillage lors de l'exécution, car ils font tous la même chose. (nous pouvons les accrocher à leurs éléments parents, distinguer chacun d'eux par bouillonnement, puis exécuter le handle d'événement).
Avantages

• Cette méthode fournit une solution de compatibilité pour la gestion des événements entre différents navigateurs

• C'est très pratique pour lier des événements à des éléments

• .click(), .hover()... Ces liaisons temporelles très pratiques sont toutes liées Une méthode de traitement simplifiée

• est très bon pour les éléments sélectionnés par ID. Non seulement il peut être accroché rapidement (la page ne peut avoir qu'un seul ID), mais lorsque l'événement se produit, le gestionnaire peut être exécuté immédiatement (équivalent au live ultérieur, délégué) méthode d'implémentation

Inconvénients

• Il liera les événements à tous les éléments filtrés

• Il ne liera pas les événements aux éléments qui sont ajoutés dynamiquement une fois l'exécution terminée

• Lorsqu'il y a de nombreux éléments filtrés, des problèmes d'efficacité peuvent survenir

• Bind() ne peut être effectué que lorsque la page est chargée, des problèmes d'efficacité peuvent donc survenir. La méthode

---

.live()
.live() utilise le concept de délégation d'événement pour gérer la liaison d'événement. C'est la même chose que d'utiliser .bind() pour lier des événements. La méthode .live() liera l'événement correspondant à l'élément racine de l'élément que vous avez sélectionné, qui est l'élément document. Ensuite, tous les événements qui surviennent peuvent être gérés par ce même gestionnaire. Son mécanisme de traitement est le suivant. Une fois l'événement diffusé dans le document, jQuery recherchera les métadonnées du sélecteur/événement et décidera ensuite quel gestionnaire doit être appelé. Cependant, il semble avoir été supprimé dans la dernière version de jquery.

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

Avantages :

• Il n'y a qu'une seule liaison d'événement ici, qui est liée au document au lieu de .bind() Dans de cette façon, tous les éléments sont liés un par un

• Ces éléments ajoutés dynamiquement peuvent toujours déclencher ces événements précédemment liés, car la véritable liaison de l'événement se trouve sur le document

• Vous pouvez lier les événements requis avant que le document ne soit prêt

Inconvénients :

• Il est obsolète depuis la version 1.7, vous devriez donc également commencer à le supprimer progressivement.

• Le chaînage n'est pas pris en charge correctement

• Lors de l'utilisation de event.stopPropagation(), il est inutile car il doit atteindre le document

• Parce que tous les sélecteurs/événements sont liés à des documents,
  donc lorsque nous utilisons la méthode matchSelector pour sélectionner quel événement est appelé, cela sera très lent

• Lorsque l'élément où l'événement se produit est très profond dans votre arborescence DOM, il y aura des problèmes de performances

---

.Delegate()
.delegate()有点像.live(),不同于.live()的地方在于，它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation.推荐使用.delegate() 代替.live()

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

优点：

• 你可以选择你把这个事件放到那个元素上了 chaining被正确的支持了

• jQuery仍然需要迭代查找所有的selector/eventdata来决定那个子元素来匹配，但是因为你可以决定放在那个根元素上，所以可以有效的减小你所要查找的元素。

• 可以用在动态添加的元素上

缺点：

• 需要查找那个那个元素上发生了那个事件了，尽管比document少很多了，不过，你还是得浪费时间来查找。

---

.On()
其实.bind(), .live(), .delegate()都是通过.on()来实现的，.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的，这是1.8.2的源码：

$( "#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 ) {} );

优点：

• 提供了一种统一绑定事件的方法

• 仍然提供了.delegate()的优点，当然如果需要你也可以直接用.bind()

缺点：

• 也许会对你产生一些困扰，因为它隐藏了一前面我们所介绍的三种方法的细节。

结论：

• 用.bind()的代价是非常大的，它会把相同的一个事件处理程序hook到所有匹配的DOM元素上

• 不要再用.live()了，它已经不再被推荐了，而且还有许多问题

• .delegate()会提供很好的方法来提高效率，同时我们可以添加一事件处理方法到动态添加的元素上。

• 我们可以用.on()来代替上述的3种方法

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

CSS选择器使用方法总结

webkit-font-smoothing字体抗锯齿渲染使用案例详解

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!