jQuery supprime l'écouteur en direct

Lors du développement d'applications Web, il est très courant d'utiliser un répartiteur d'événements personnalisé et d'ajouter des écouteurs. jQuery est une bibliothèque JavaScript très populaire dotée d'un système d'événements très puissant qui permet aux développeurs d'ajouter des écouteurs aux éléments DOM et de gérer les événements déclenchés par les éléments DOM. En utilisant ces écouteurs d'événements, nous pouvons effectuer certaines actions, telles que l'envoi de requêtes AJAX, le transfert de données vers le serveur, etc.

Cependant, les développeurs doivent également savoir comment supprimer correctement les écouteurs des éléments DOM. Cet article explique comment supprimer des écouteurs en direct à l'aide de jQuery.

Avant jQuery 1.7, vous deviez utiliser la méthode live() pour ajouter des écouteurs d'événements. L'exemple de code est le suivant :

$('a').live('click', function() {
    console.log('clicked');
});

Ce bloc de code ajoute un écouteur qui imprimera un message dans la console lorsque l'utilisateur clique sur un élément.

Supposons maintenant qu'à un moment donné nous souhaitions supprimer l'auditeur de l'élément a, que devons-nous faire ?

Dans jQuery, lorsque vous souhaitez supprimer un écouteur, vous pouvez utiliser la méthode unbind() et spécifier le type d'événement et la fonction de gestionnaire correspondants. Mais ici, cette approche ne fonctionne pas. La raison en est que l'écouteur ajouté par la méthode live() ne se trouve pas réellement sur l'élément DOM lui-même, mais est implémenté dans tout le document.

Donc, si vous essayez d'utiliser la méthode unbind() pour supprimer l'écouteur d'événement en direct, cela ne fonctionnera pas correctement. En d’autres termes, cet écouteur d’événements existera jusqu’à ce que la page soit fermée ou rechargée.

Pour résoudre ce problème, l'équipe jQuery a développé une nouvelle méthode délégué(), qui peut être utilisée pour remplacer live(). Les écouteurs ajoutés à l'aide de la méthode délégué() peuvent être supprimés à l'aide de la méthode off().

Ce qui suit est un nouveau code qui réécrit l'exemple de code précédent à l'aide de la méthode délégué() :

$(document).delegate('a', 'click', function() {
    console.log('clicked');
});

Ici, nous utilisons la méthode délégué() pour ajouter un écouteur d'événement. Le premier paramètre est le sélecteur, spécifiant l'élément à surveiller, le deuxième paramètre est le type d'événement spécifié et le troisième paramètre est la fonction de gestion des événements.

Maintenant, si vous souhaitez supprimer cet écouteur d'événement à un moment donné, vous pouvez utiliser la méthode off(), comme indiqué ci-dessous :

$(document).off('click', 'a', function() {
    console.log('clicked');
});

Dans ce nouveau bloc de code, nous effaçons l'écouteur via la méthode off(). Le premier paramètre est le type d'événement, le deuxième paramètre est le sélecteur et le troisième paramètre est le gestionnaire d'événements à supprimer. Notez que le gestionnaire d'événements doit correspondre exactement, car vous ne pouvez pas simplement supprimer un écouteur spécifique auquel un sélecteur est attaché.

L'événement de clic lui-même sur l'élément ne sera pas modifié ici, mais l'écouteur d'événement sera supprimé sur toute la page. Par conséquent, si vous souhaitez ajouter un nouvel écouteur d'événement en direct à l'avenir, il vous suffit d'utiliser la méthode new délégué() pour ajouter l'écouteur sans vous soucier de l'impact de l'ancien écouteur sur le nouvel écouteur.

Résumé

Dans cet article, nous avons appris comment supprimer des auditeurs en direct dans jQuery. Lorsque vous ajoutez un écouteur d'événements à l'aide de jQuery, il est attaché à l'ensemble du document plutôt qu'à un élément DOM spécifique. Par conséquent, afin de supprimer ce type d'écouteur, vous devez utiliser la méthode délégué() au lieu de la méthode live() et utiliser la méthode off() pour supprimer l'écouteur correspondant. Si vous souhaitez empêcher la suppression d'autres types d'écouteurs d'événements, veillez à utiliser la syntaxe correcte pour garantir que seuls les écouteurs spécifiés que vous souhaitez supprimer sont supprimés.

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!