Comment pouvez-vous écouter les événements sur des éléments créés dynamiquement sans utiliser jQuery ?

Comment ajouter des écouteurs d'événements aux éléments créés dynamiquement

Lorsque vous travaillez sur des pages Web qui intègrent du contenu dynamique, il peut être nécessaire d'ajouter des écouteurs d'événements à des éléments qui ne le sont pas. présent sur la page initialement. Ce guide décrit une méthode pour y parvenir sans recourir à jQuery.

L'approche originale impliquait l'utilisation de doc.body.addEventListener('click') pour gérer les événements des éléments existants lors du chargement de la page. Cependant, pour les éléments générés dynamiquement, une solution plus robuste est requise.

Délégation et propagation d'événements

La clé pour ajouter dynamiquement des écouteurs d'événements est la délégation d'événements. Avec cette approche, vous pouvez attacher un seul écouteur d'événement à un élément parent (par exemple, le corps), puis vérifier la cible de l'événement pour déterminer l'élément spécifique sur lequel vous avez cliqué.

Exemple de code

<code class="javascript">document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // Perform actions specific to 'li' elements
  }
});</code>

Dans cet exemple, un écouteur d'événement est attaché au corps. Lorsqu'un élément du corps est cliqué, la cible de l'événement est examinée. Si la cible est un élément li, les actions souhaitées sont effectuées.

Mises en garde

Notez que le code fourni est compatible avec les navigateurs modernes. Pour la compatibilité du navigateur avec les anciennes versions d'Internet Explorer, un wrapper personnalisé autour des fonctions d'événement natives peut être requis.

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!