Écouteur d'événements pour les éléments créés dynamiquement

Pour ajouter des écouteurs d'événements aux éléments générés dynamiquement sans jQuery, vous pouvez utiliser la délégation d'événements. Voici comment :

Utiliser la délégation d'événement
La propriété target de l'objet événement vous permet d'identifier sur quel élément l'événement s'est produit. Grâce à cela, vous pouvez lier un écouteur d'événement à un élément parent et vérifier que l'élément cible répond à des critères spécifiques. Par exemple :

document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // Do your action on the newly created 'li'
  }
});

Dans cet exemple, l'écouteur d'événement est lié au corps, et lorsqu'un clic se produit sur un élément enfant, le code vérifie s'il s'agit d'un 'li'. Si tel est le cas, l'action spécifiée est effectuée.

Mises en garde
Notez que cette approche fonctionne bien avec les navigateurs modernes qui prennent en charge le mécanisme de délégation d'événements. Pour les anciennes versions d'IE, vous devrez peut-être implémenter un gestionnaire d'événements personnalisé à l'aide de attachEvent.