Comment gérer la pièce jointe de l'écouteur d'événement pour les éléments générés dynamiquement sans jQuery ?

Pièce jointe d'écouteur d'événement dynamique

Vous souhaitez attacher des écouteurs d'événement à des éléments générés dynamiquement sur une page Web qui ne vous appartient pas. Puisque vous ne pouvez pas utiliser jQuery, vous recherchez une solution alternative.

La délégation d'événements est une approche viable dans ce scénario. En attachant un écouteur à un élément de niveau supérieur (par exemple, body), vous pouvez capturer les événements qui découlent de ses éléments enfants, y compris ceux créés dynamiquement.

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

Dans cet extrait :

• Nous ajoutons un écouteur d'événement de clic à l'élément body.
• Lorsqu'un événement de clic se produit, nous vérifions le tagName de l'événement.target.
• Si la cible est un < ;li> élément, nous exécutons l'action souhaitée.

Notez que cette approche repose sur le bouillonnement d'événements. Cela peut ne pas fonctionner dans certains navigateurs plus anciens qui ne prennent pas en charge ce mécanisme. De plus, si des éléments générés dynamiquement sont imbriqués dans d'autres éléments (par exemple,

dans

), vous devrez peut-être ajuster le sélecteur de délégation d'événement en conséquence.

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!