Периодическое делегирование событий JavaScript перестает работать после мутаций DOM ⇐ Javascript

[Anonymous]

Я столкнулся со сложной и противоречивой проблемой JavaScript, связанной с делегированием событий, которая появляется только после определенных мутаций DOM, и я пытаюсь понять основную причину, а не применять обходной путь.
Цель
Я хочу, чтобы делегированный обработчик кликов продолжал надежно работать для динамически добавляемых элементов.
Ожидается Поведение
События кликов должны фиксироваться единообразно для всех динамически созданных кнопок с использованием делегирования событий.
Фактическое поведение
После нескольких обновлений DOM обработчик кликов молча перестает срабатывать для вновь добавленных элементов. В консоли не отображаются ошибки JavaScript, и существующие элементы могут продолжать работать.
Среда

• Ванильный JavaScript (без платформы)
• Делегирование событий через document.addEventListener
• Динамические обновления DOM
• Современные браузеры (Chrome / Firefox)

Минимальный воспроизводимый пример

Код: Выделить всё

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);

Код: Выделить всё

Наблюдения

• В DevTools не появляется ошибок или предупреждений
• Прослушиватель событий регистрируется только один раз
• Проблема становится более частой после внутреннееHTML переназначение
• Делегирование должно по-прежнему работать в соответствии с документацией

Что я пробовал

• Использование close() вместо match()
• Привязка событий непосредственно к элементам
• Избежание дублирования прослушивателей
• Отладка с помощью точек останова и снимков памяти

Вопрос
Какое внутреннее поведение DOM или браузера вызывает обработчики делегированных событий перестать отвечать после определенных мутаций DOM, таких как переназначение внутреннего HTML, даже если ошибок не возникает?
Связано ли это с:

• заменой идентификатора узла?
• недействительностью цели события?
• сборкой мусора DOM ссылки?
• Или другой основной механизм?

Я ищу техническое объяснение того, почему это происходит, и правильный шаблон, позволяющий этого избежать, а не просто обходной путь.

Подробнее здесь: https://stackoverflow.com/questions/798 ... -mutations