如何为div的innerHTML变更添加EventListener监听事件

原生JS里没有直接对应innerHTML变更的事件，要实现这个需求，你可以用MutationObserver（DOM突变观察者）来监听容器的子节点变化——因为修改innerHTML本质上会添加、替换或删除容器的子元素，刚好能被这个API捕捉到。

具体实现步骤 #

• 新建一个MutationObserver实例，传入回调函数，每次DOM变化时就会触发这个函数
• 配置监听选项，指定要监听的DOM变化类型（这里需要监听子节点的添加/移除，以及后代节点的变化）
• 把观察者绑定到目标容器上

修改后的完整代码 #

const xData = 40;
const container = document.querySelector('.container');

// 创建MutationObserver实例
const observer = new MutationObserver(() => {
    console.log("you have just added some exotic stuff!");
});

// 配置监听选项：监听子节点变化，包括后代节点
observer.observe(container, {
    childList: true,
    subtree: true
});

// 第一次修改innerHTML
container.innerHTML = `<div class="container_Addons">${xData}</div>`;

// 循环添加内容
for (let i = 0; i < 10; i++){
    container.innerHTML += `<div class="container_Addons">${i}st ${xData}</div>`;
};

补充说明 #

• 如果你只想监听innerHTML导致的新增元素，可以在回调函数里通过mutation.addedNodes判断是否有新节点添加，避免其他DOM变化触发不必要的日志
• 原代码里的循环用innerHTML +=会重新渲染整个容器的内容，效率较低，实际开发中推荐用appendChild或insertAdjacentHTML来添加元素，性能更好，同时也能被MutationObserver监听

内容的提问来源于stack exchange，提问作者Rodrigo