Pourquoi mon écouteur d'événement de clic se déclenche-t-il lors du chargement de la page plutôt que lorsque je clique sur l'élément ?

déclencheurs d'événements addEventListener lors du chargement de la page

En JavaScript, la méthode addEventListener() est conçue pour enregistrer un écouteur d'événement pour un élément particulier. Cependant, lorsqu'ils tentent d'attacher un écouteur de clics à un élément créé dynamiquement, certains développeurs peuvent rencontrer un comportement particulier où l'événement se déclenche lors du chargement de la page plutôt que lorsque l'on clique sur l'élément. Pour résoudre ce problème, examinons l'extrait de code et son exécution.

Dans le script fourni, un élément HTML div avec l'ID "myDiv" est créé à l'aide de document.write(), suivi de la récupération de l'élément en utilisant document.getElementById("myDiv"). Ensuite, la méthode addEventListener() est utilisée pour attacher un écouteur d'événement pour l'événement « clic » à l'élément récupéré. L'écouteur est défini comme alert("clicktrack"), qui tente d'afficher une alerte avec le message "clicktrack".

Le nœud du problème réside dans la façon dont le gestionnaire d'événements est transmis à addEventListener(). Lorsque vous utilisez une expression de fonction, il est impératif d'encapsuler la fonction entre parenthèses pour garantir que la fonction elle-même est transmise au lieu de sa valeur de retour. Dans l'extrait de code, la syntaxe correcte doit être :

el.addEventListener("click", function() { alert("clicktrack"); }, false);

Cette modification encapsule l'appel d'alerte dans une fonction, garantissant que la fonction est enregistrée en tant que gestionnaire d'événements plutôt que la valeur de retour de la fonction, ce qui serait indéfini. Par conséquent, l'événement ne sera déclenché que lorsque l'on clique sur l'élément "myDiv", comme prévu, plutôt que lors du chargement de la page.

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!