Événements sur éléments ajoutés dynamiquement

[annawonka]

Bonjour, Smash Karts Game

Je travaille sur une page où des éléments sont ajoutés automatiquement après le chargement des données depuis une API. Je voudrais ajouter des événements click sur ces nouveaux éléments, mais après plusieurs mises à jour, certains clics semblent se déclencher plusieurs fois.

Dans ce type de situation, quelle est la meilleure méthode à utiliser pour éviter ce problème : observer les changements du DOM ou utiliser une autre approche comme la délégation d’événements ? J’aimerais comprendre quelle solution est la plus propre pour une application avec du contenu mis à jour fréquemment.

[melomane]

bonjour
tu ne semble pas maîtriser l'ensemble il faudrait savoir d’où vient l'erreur

[sprunkiincredibox]

Cette approche évite complètement les problèmes de duplication de listeners, Sprunki puisqu’on ne réattache pas d’événements à chaque rendu du DOM. Elle est aussi plus performante et plus simple à maintenir dans les interfaces qui changent souvent.

[marryjoy63]

Je partirais aussi sur la délégation d'événements dans ce cas. Si les éléments sont recréés régulièrement, c'est généralement la solution la plus simple et ça évite d'attacher plusieurs fois les mêmes listeners. Un MutationObserver est plutôt utile quand on a vraiment besoin de réagir aux changements du DOM, mais je ne l'utiliserais pas uniquement pour gérer les clics.

[alexiaamber]

Bonjour,

Dans ce cas, je privilégierais généralement la délégation d’événements plutôt que MutationObserver. Si les éléments ajoutés ont un parent commun, tu peux attacher un seul click sur ce parent et vérifier ensuite si la cible correspond au sélecteur voulu.free online games

Par exemple :

const container = document.querySelector('#container');

container.addEventListener('click', (e) => {
const item = e.target.closest('.item');
if (!item || !container.contains(item)) return;

// traitement du clic
});

L'avantage est que les nouveaux .item sont automatiquement pris en compte, sans avoir à ajouter un listener à chaque insertion. Ça évite également le problème des handlers qui s'accumulent lorsque le contenu est régulièrement recréé.

MutationObserver est plutôt intéressant si tu dois réagir à l'ajout ou à la modification d'éléments, et pas simplement gérer leurs clics.

Si tu utilises malgré tout des listeners individuels, il faut surtout veiller à ne pas réenregistrer le même handler après chaque mise à jour.