Maison >interface Web >js tutoriel >Comment puis-je supprimer un écouteur d'événement de son propre gestionnaire d'événements en JavaScript ?

Comment puis-je supprimer un écouteur d'événement de son propre gestionnaire d'événements en JavaScript ?

Susan Sarandon
Susan Sarandonoriginal
2024-12-08 16:55:10779parcourir

How Can I Remove an Event Listener from Within Its Own Event Handler in JavaScript?

Suppression des écouteurs d'événement dans les gestionnaires d'événements

Vous recherchez une solution pour supprimer un écouteur d'événement au sein de sa propre définition. Cependant, en raison du mécanisme de gestion des événements de JavaScript, cela n'est pas directement réalisable.

Une approche consiste à utiliser des fonctions nommées. En créant une fonction nommée et en l'utilisant comme gestionnaire d'événements, vous pourrez ultérieurement supprimer l'écouteur d'événements en faisant référence à son nom de fonction. Simultanément, la variable click doit être déclarée en dehors du gestionnaire d'événements pour faciliter son incrément.

var click_count = 0;

function myClick(event) {
    click_count++;
    if(click_count == 50) {
       canvas.removeEventListener('click', myClick);
    }
}

canvas.addEventListener('click', myClick);

Vous pouvez également utiliser la fermeture pour créer une fonction qui encapsule la variable click_count. Cette approche vous permet d'incrémenter le compteur sur plusieurs éléments.

var myClick = (function( click_count ) {
    var handler = function(event) {
        click_count++;
        if(click_count == 50) {
           canvas.removeEventListener('click', handler);
        }
    };
    return handler;
})( 0 );

canvas.addEventListener('click', myClick);

Enfin, si vous préférez que chaque élément ait son propre compteur, envisagez d'utiliser une fonction anonyme qui accepte un paramètre pour son nombre de clics initial.

var myClick = function( click_count ) {
    var handler = function(event) {
        click_count++;
        if(click_count == 50) {
           canvas.removeEventListener('click', handler);
        }
    };
    return handler;
};

canvas.addEventListener('click', myClick( 0 ));

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn