Comment puis-je conserver les écouteurs d'événements lors de la mise à jour du HTML interne d'un nœud DOM ?

Préservation des écouteurs d'événements lors de la modification de innerHTML

Lors de l'attribution au innerHTML d'un nœud DOM, tous les écouteurs d'événements attachés aux éléments descendants seront détruits. Cela peut être problématique si l'intention est d'ajouter du contenu supplémentaire sans compromettre la gestion des événements existants.

Solution : insertAdjacentHTML

La méthode .insertAdjacentHTML() fournit une solution qui préserve écouteurs d'événements lors de la modification de innerHTML. En spécifiant l'emplacement du contenu inséré à l'aide de « afterend », il est possible d'ajouter du contenu sans affecter la structure DOM existante ou ses gestionnaires d'événements.

Exemple :

Considérez l'extrait de code suivant :

var mydiv = document.getElementById('mydiv');

// Appending content using .innerHTML (destroys event listeners)
mydiv.innerHTML += '<p>New paragraph</p>';

// Appending content using .insertAdjacentHTML (preserves event listeners)
mydiv.insertAdjacentHTML('beforeend', '<p>New paragraph</p>');

Dans cet exemple, la méthode .insertAdjacentHTML() a réussi ajoute un nouveau paragraphe à l'élément #mydiv tout en préservant les écouteurs d'événements existants. Cette approche peut être appliquée à tout élément DOM nécessitant une modification de contenu sans compromettre sa gestion des événements.

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!