Explication détaillée de l'espace de noms d'événement jQuery

Il est très simple de lier et de dissocier les auditeurs d'événement avec jquery. Mais lorsque plusieurs auditeurs sont liés à un événement sur un élément, comment dissocier exactement l'un des auditeurs ? Nous devons comprendre l'espace de noms de l'événement.

Regardez le code suivant :

$(“#element”)
    .on(“click”, doSomething)
    .on(“click”, doSomethingElse);

Liez les écouteurs d'événement comme ci-dessus Lorsque vous cliquez sur l'élément, les écouteurs doSomething et doSomethingElse seront déclenchés. C'est une commodité de l'utilisation de jQuery, vous pouvez ajouter différents écouteurs au même événement d'un élément à tout moment. Contrairement à l'utilisation de onclick , le nouvel auditeur écrasera l'ancien.

Si vous souhaitez dissocier l'un des auditeurs, comme doSomething, comment faire ?

Est-ce vrai ?

$(“#element”).off(“click”);

Attention ! La ligne de code ci-dessus dissociera tous les écouteurs pour l'événement click de l'élément, ce qui n'est pas le résultat souhaité.

Heureusement, la méthode .off() de jQuery peut accepter un deuxième paramètre, tout comme .on() . Tant que le nom de la fonction d'écoute est transmis à la méthode .off() comme deuxième paramètre, l'écouteur spécifié peut être indépendant.

$(“#element”).off(“click”, doSomething);

Mais si vous ne connaissez pas le nom de cette fonction, ou si vous utilisez une fonction anonyme :

$(“#element”)
    .on(“click”, function() {
        console.log(“doSomething”);
    });

Comment résolvez-le avec précision. Qu'en est-il de la liaison d'un écouteur d'événement de clic ? Il est temps d'en savoir plus sur l'espace de noms d'événement de jQuery !

D'abord le code :

$(“#element”)
    .on(“click.myNamespace”, function() {
        console.log(“doSomething”);
    });

Il ne s'agit pas simplement de transmettre l'événement click en tant que paramètre dans la méthode .on(), mais de spécifier un espace de noms pour l'événement click, puis de le surveiller. cliquez sur l'événement dans l'espace de noms. À ce stade, même si l'écouteur est une fonction anonyme, il est en réalité « nommé ». Vous pouvez désormais dissocier l'écouteur d'événements d'un espace de noms spécifique comme suit.

$(“#element”).off(“click.myNamespace”);

C'est une autre fonction pratique et puissante que nous propose jQuery, et sa mise en œuvre interne est certainement intéressante !

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!