Maison  >  Article  >  interface Web  >  Voici quelques titres d’articles potentiels sous forme de questions, en fonction du contenu que vous avez fourni : * **Pourquoi mon JavaScript `addEventListener` se déclenche-t-il lors du chargement de la page lors de l'ajout à un élément dynamique ?** * **H

Voici quelques titres d’articles potentiels sous forme de questions, en fonction du contenu que vous avez fourni : * **Pourquoi mon JavaScript `addEventListener` se déclenche-t-il lors du chargement de la page lors de l'ajout à un élément dynamique ?** * **H

Barbara Streisand
Barbara Streisandoriginal
2024-10-28 11:48:51322parcourir

Here are some potential article titles in a question format, based on your provided content:

* **Why Does My JavaScript `addEventListener` Fire on Page Load When Adding to a Dynamic Element?** 
* **How to Ensure Event Listeners Work Correctly with Dynami

L'événement JavaScript "addEventListener" se déclenche lors du chargement de la page

Lors de l'association d'écouteurs d'événements à des éléments créés dynamiquement, il est essentiel de s'assurer que l'écouteur est lié correctement pour déclencher l'événement à l'heure souhaitée.

Dans le script fourni, l'événement se déclenche lors du chargement de la page car l'écouteur d'événement est ajouté avant que l'élément ne soit créé et inséré dans le DOM. Pour résoudre ce problème, les éléments suivants doivent être pris en compte :

  • Créez d'abord l'élément : Écrivez le code HTML de l'élément dans la page ou générez-le dynamiquement à l'aide de document.createElement() .
  • Rechercher l'élément dans le DOM : Récupérer l'élément à l'aide de document.getElementById().
  • Ajouter correctement l'écouteur d'événement : Attacher le écouteur d'événements utilisant addEventListener(). Au lieu de passer directement la fonction d'alerte, enveloppez-la dans une fonction anonyme pour l'exécuter lorsque l'événement se produit.

Le script corrigé devrait ressembler à ceci :

<code class="javascript">document.write("<div id=\"myDiv\">I am a div</div>");
el = document.getElementById("myDiv");
el.addEventListener("click", function() { alert("clicktrack"); }, false);</code>

En suivant ces étapes, l'écouteur d'événement sera attaché à l'élément une fois qu'il existe dans le DOM, et l'événement sera déclenché lorsque l'on clique sur l'élément.

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