Comment supprimer un écouteur d'événements en javascript? | Expliqué avec des exemples

JavaScript est très utilisé dans le développement de pages Web. Étant une langue dynamique, il est facile de modifier les comportements de la page lors de l'exécution. Il est normalement plus facile à utiliser dans l'environnement côté client car nous sommes en mesure d'apporter des modifications très rapidement. Aujourd'hui, nous allons parler d'une autre opération JavaScript, c'est ainsi que nous pouvons facilement supprimer l'auditeur d'événement d'un événement.

Suppression de l'auditeur d'événements à l'aide de JavaScript

La suppression de l'auditeur d'événements d'un élément HTML spécifique peut être si importante dans certains cas que vous ne voulez pas que l'événement soit déclenché plusieurs fois sans aucune raison. JavaScript peut être très utile pour réaliser cette fonctionnalité, alors voyons comment nous pouvons facilement faire ce travail.

Méthode devoieEventListener ()

RetireEventListener () est une fonction intégrée dans JavaScript qui peut être utilisée pour supprimer les écouteurs d'événements des éléments HTML.Supposons que vous avez l'écouteur d'événements suivant attaché à un élément:

Cliquez sur moi


Supposons maintenant que vous souhaitiez supprimer l'événement de clic du bouton, vous aurez besoin d'une référence à la fois à l'élément contenant l'écouteur et la référence de la fonction de rappel pour supprimer efficacement un écouteur d'événements. Pour supprimer l'événement «cliquez», le code ira comme ceci:

btn.retireEventListener ('cliquez', cliquez sur)

Cependant, ce n'est pas une bonne idée de passer un auditeur d'événements une fonction de rappel sans nom comme ceci:

btn.addEventListener ('click', (e) =>
alert («ce bouton a été cliqué»);
)

Vous ne pourrez pas supprimer l'écouteur d'événements sans le nom de la fonction de rappel, comme le montre l'exemple ci-dessus.

Suppression de l'auditeur d'événements après avoir cliqué sur le bouton

Parfois, vous ne voulez pas que le bouton soit cliqué deux fois comme s'il allait être cliqué, l'événement se déclenche et provoquera les problèmes de traitement sous l'événement. Donc, pour gérer ce problème instantanément, nous devons attacher un retireEventListener () à l'intérieur de AddeveNetListener () méthode. Voyons comment nous pouvons réaliser cette fonctionnalité dans le code ci-dessous:

Cliquez sur moi

Sortir:

Ainsi, avec l'exemple ci-dessus, une fois le bouton cliqué, il va déclencher l'événement qui y est attaché et supprimer cet événement après avoir désactivé le bouton pour éviter plusieurs clics en même temps de l'utilisateur.

C'est ainsi que vous vous débarrassez des auditeurs d'événements JavaScript de HTML Elements. Pour retirer un écouteur d'événements d'un élément HTML, vous devez prendre soin des deux choses, vous devez définir le type de l'événement et la deuxième chose est que vous devez fournir la fonction de référence qui est attachée à l'écouteur d'événements.

Conclusion

Le retireEventListener () La méthode est utilisée chaque fois que vous devez supprimer l'événement d'un élément HTML particulier. Cette méthode nécessite deux arguments, le premier argument sera le nom de l'événement tandis que le deuxième argument sera la fonction qui est attachée à l'écouteur de l'événement. Dans cet article, nous avons vu l'exemple où nous avons discuté de la façon dont nous pouvons simplement supprimer un événement attaché à un élément HTML.