Периодическое делегирование событий 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.
• Делегирование должно по-прежнему работать в соответствии с документацией

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

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

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

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

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

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