Pourquoi « addEventListener » appelle-t-il ma fonction immédiatement plutôt que lors du déclenchement d'un événement ?

"addEventListener appelle la fonction sans invite" expliqué

Lorsque nous attachons un écouteur d'événement à un élément, nous voulons que la fonction s'exécute uniquement lorsque l'événement se produit. Mais dans certains cas, il peut être difficile de garantir que la fonction n'est pas appelée prématurément.

Considérez le code HTML suivant :

<span></span>

Nous souhaitons ajouter un événement de clic au deuxième lien :

second.addEventListener('click', message_me('shazam'));

où 'message_me' est une fonction externe qui affiche un message. Étonnamment, ce code déclenche la fonction 'message_me' immédiatement, avant même de cliquer sur le deuxième lien.

Le problème

Le problème réside dans la façon dont JavaScript gère les références de fonction comme deuxième argument de 'addEventListener'. JavaScript attend une référence à une fonction, mais dans le code problématique, la fonction 'message_me('shazam')' est invoquée immédiatement et son résultat est transmis à la place.

La solution

Il existe deux façons de résoudre ce problème :

• Créer un compte anonyme function : Enveloppez 'message_me' dans une fonction anonyme pour renvoyer une référence de fonction :

second.addEventListener('click', function() {
    message_me('shazam');
});

Cette solution garantit que 'message_me' est appelé uniquement lorsque le deuxième lien est cliqué.

• Renvoyer une fonction depuis 'message_me' : Modifier 'message_me' pour renvoyer une référence de fonction :

function message_me(m_text) {
    return function() {
        alert(m_text);
    };
}

second.addEventListener('click', message_me('shazam'));

Dans ce cas, 'addEventListener' reçoit une référence à une fonction qui sera exécutée lorsque l'événement click se produit.

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!