La fonction on() de JQuery liera-t-elle les événements à plusieurs reprises ?

JQuery est une bibliothèque JavaScript populaire qui fournit des opérations DOM et une gestion des événements pratiques dans le développement front-end et constitue l'un des outils essentiels du développement Web. Lorsque nous utilisons JQuery, nous utilisons souvent la fonction de liaison d'événements on(). Cependant, de nombreux développeurs sont souvent confrontés à une question : la fonction on() de JQuery liera-t-elle les événements à plusieurs reprises ?

Tout d'abord, jetons un coup d'œil à la définition et à l'utilisation de la fonction on() :

$(selector).on(event, childSelector, data, function(){...})

Parmi elles, selector est l'élément auquel l'événement est lié, event est le type d'événement lié et childSelector est l'élément enfant. sélection qui déclare la délégation d'événement. Le gestionnaire, data sont les données transmises au gestionnaire d'événements et function est le gestionnaire d'événements lié. Le principe de fonctionnement de la fonction

on() est le suivant : lorsqu'un événement est déclenché, l'élément correspondant au sélecteur sera traité par le gestionnaire d'événement correspondant. La fonction on() ajoute le gestionnaire d'événements à la liste des écouteurs d'événements de l'élément sélectionné.

Alors, que se passe-t-il lorsque nous utilisons la fonction on() plusieurs fois pour lier le même type d'événement ?

En fait, chaque fois que la fonction on() est appelée, le gestionnaire d'événements de ce type d'événement sera ajouté à la liste des écouteurs d'événements, même si le même gestionnaire d'événements a déjà été lié. Cela signifie que si nous utilisons la méthode on plusieurs fois pour lier le même événement, le même gestionnaire d'événements sera ajouté à plusieurs reprises à la liste des écouteurs d'événements.

Par exemple, le code suivant liera à plusieurs reprises l'événement click :

$(selector).on('click', function(){...});
$(selector).on('click', function(){...});
$(selector).on('click', function(){...});

De cette façon, chaque fois que l'on clique sur l'élément, JQuery exécutera les gestionnaires d'événements trois fois dans l'ordre de liaison.

Cependant, si nous utilisons la fonction on() pour lier un gestionnaire d'événements, puis utilisons à nouveau la fonction off() pour dissocier le gestionnaire d'événements, puis utilisons à nouveau la fonction on() pour lier le gestionnaire d'événements, ce gestionnaire d'événements Les programmes ne seront ajoutés qu'une seule fois. Parce que lorsque vous utilisez la fonction off() pour dissocier un événement, JQuery supprimera le gestionnaire d'événements de la liste des écouteurs d'événements et le rajoutera lorsque vous utiliserez à nouveau la fonction on().

Ainsi, nous pouvons éviter le problème de la liaison répétée d'événements par la fonction on() en utilisant la fonction off() pour dissocier l'événement.

$(selector).on('click', function(){
   // code here;
   $(selector).off('click');//解绑click事件
   $(selector).on('click', function(){
     // do something
   });
});

Dans le code ci-dessus, nous utilisons la fonction off() dans le gestionnaire d'événements pour dissocier l'événement click. Ensuite, un nouvel événement de clic a été lié dans le gestionnaire d'événements et le nouveau gestionnaire d'événements a été ajouté.

Bien sûr, en plus d'utiliser la fonction off() pour dissocier l'événement afin d'éviter que la fonction on() ne lie l'événement à plusieurs reprises, nous pouvons également empêcher les liaisons répétées en déterminant si l'événement existe déjà dans la liste des écouteurs d'événements.

if(!$(selector).data('hasBind')){
  $(selector).data('hasBind', true).on('click', function(){
    // do something
  });
}

Dans le code ci-dessus, nous utilisons la méthode data() pour établir un attribut hasBind sur l'élément et définir sa valeur initiale sur false. Ensuite, en jugeant la valeur de l'attribut hasBind, s'il est faux, liez l'événement et définissez la valeur de l'attribut hasBind sur true, afin qu'il ne soit pas lié à plusieurs reprises dans le futur.

En résumé, la méthode on() de JQuery liera les événements à plusieurs reprises, nous devons donc utiliser la fonction off() pour dissocier l'événement, ou empêcher une liaison répétée en déterminant si l'événement est déjà dans la liste des écouteurs d'événements. Cela peut mieux éviter le problème de l'exécution répétée lors de la liaison d'événements et améliorer l'efficacité du développement front-end.

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!