Die zeitweilige Delegation von JavaScript-Ereignissen funktioniert nach DOM-Mutationen nicht mehr ⇐ JavaScript

[Anonymous]

Ich stehe vor einem schwierigen und inkonsistenten JavaScript-Problem im Zusammenhang mit der Ereignisdelegierung, das nur nach bestimmten DOM-Mutationen auftritt, und ich versuche, die Grundursache zu verstehen, anstatt eine Problemumgehung anzuwenden.
Ziel
Ich möchte, dass ein delegierter Klickhandler weiterhin zuverlässig für dynamisch hinzugefügte Elemente funktioniert.
Erwartet Verhalten
Klickereignisse sollten für alle dynamisch erstellten Schaltflächen mithilfe der Ereignisdelegierung konsistent erfasst werden.
Tatsächliches Verhalten
Nach mehreren DOM-Aktualisierungen stoppt der Klick-Handler stillschweigend das Auslösen für neu hinzugefügte Elemente. In der Konsole werden keine JavaScript-Fehler angezeigt und vorhandene Elemente funktionieren möglicherweise weiterhin.
Umgebung

• Vanilla JavaScript (kein Framework)
• Ereignisdelegation über document.addEventListener
• Dynamische DOM-Updates
• Moderne Browser (Chrome / Firefox)

Minimal reproduzierbares Beispiel

Code: Select all

const container = document.getElementById("container");

document.addEventListener("click", function(e) {
if (e.target.matches(".dynamic-btn")) {
console.log("Clicked:", e.target.dataset.id);
}
});

function addButton(id) {
const btn = document.createElement("button");
btn.className = "dynamic-btn";
btn.dataset.id = id;
btn.textContent = "Button " + id;
container.appendChild(btn);
}

let count = 0;

setInterval(() => {
addButton(++count);

// Simulate DOM mutation
if (count % 5 === 0) {
container.innerHTML = container.innerHTML;
}
}, 1000);

Code: Select all

Beobachtungen

• In DevTools werden keine Fehler oder Warnungen angezeigt
• Der Ereignis-Listener wird nur einmal registriert
• Das Problem tritt nach innerHTML häufiger auf Neuzuweisung
• Delegation sollte immer noch gemäß der Dokumentation funktionieren

Was ich versucht habe

• Nest() anstelle von matches() verwenden
• Bindungsereignisse direkt zu Elementen
• Vermeidung doppelter Listener
• Debuggen mit Haltepunkten und Speicher-Snapshots

Frage
Welches interne DOM- oder Browserverhalten führt dazu, dass delegierte Ereignishandler nach bestimmten DOMs nicht mehr reagieren? Mutationen, wie Neuzuweisung von innerHTML, auch wenn keine Fehler ausgegeben werden?
Hängt das zusammen mit:

• Knotenidentitätsersatz?
• Ereigniszielungültigmachung?
• Garbage Collection von DOM-Referenzen?
• Oder ein anderer zugrunde liegender Mechanismus?

Ich suche nach einer technischen Erklärung, warum das passiert, und dem richtigen Muster, um es zu vermeiden, nicht nur nach einer Problemumgehung.