Pourquoi mes écouteurs d'événements déclenchent-ils des fonctions immédiatement ?

Écouteurs d'événements : le mystère des appels de fonction non sollicités

Lorsque vous travaillez avec des écouteurs d'événements, on peut rencontrer un comportement déroutant : l'ajout d'un écouteur d'événements avec une référence de fonction externe semble pour appeler la fonction immédiatement, même sans cliquer sur l'élément. Cela peut être frustrant et entraîner un comportement inattendu.

Considérez l'extrait HTML suivant :

<span>

Pour ajouter des événements de clic, vous pouvez utiliser la méthode addEventListener :

first.addEventListener('click', function() {
  alert('sup!');
})

Ce code fonctionne comme prévu, déclenchant une alerte lorsque le « Premier lien » est cliqué. Cependant, lors de l'utilisation d'une fonction externe comme deuxième argument :

function message_me(m_text) {
    alert(m_text)
}

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

La fonction message_me est invoquée immédiatement, ce qui entraîne un message d'alerte avant même de cliquer sur le "Deuxième lien".

Pour Pour résoudre ce problème, il faut comprendre que le deuxième paramètre de addEventListener attend une référence de fonction. Dans le code problématique, la fonction est invoquée directement et son résultat est transmis à addEventListener. Au lieu de cela, soit une fonction anonyme doit être utilisée comme deuxième argument, soit la fonction externe doit être modifiée pour renvoyer une fonction.

Par exemple, nous pouvons utiliser une fonction anonyme dans addEventListener :

function message_me(m_text) {
    alert(m_text)
} 

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

En fournissant une référence de fonction dans la fonction anonyme, nous garantissons que la fonction message_me n'est invoquée que lorsque le "Deuxième lien" est cliqué.

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!