为何通过JS修改HTML时，change事件监听器无法生效？

change事件仅针对表单控件元素（比如<input>、<select>、<textarea>这类），普通的<div>元素本身不会触发这个事件——它的设计初衷是监听用户和表单控件的交互行为（比如输入框输完内容失焦、下拉框选中新选项），而非脚本对普通DOM元素的内容修改。

你通过innerHTML手动修改<div>内容的操作，完全不会触发change事件，这就是监听器没执行的核心原因。

两种可行的解决思路 #

思路1：手动触发自定义事件 #

自己定义一个专属事件，在修改内容后主动触发它，就能绑定回调执行：

<div id="thing">No</div>
<script>
    let elt = document.getElementById("thing")
    elt.addEventListener("click", () => {
        elt.innerHTML = "Yes";
        // 触发自定义的contentChange事件
        elt.dispatchEvent(new CustomEvent('contentChange'));
    });
    // 监听自定义事件
    elt.addEventListener("contentChange", () => alert("Running"));
</script>

思路2：用MutationObserver自动监听DOM变化 #

如果需要自动捕捉元素内容的任何修改（不管是脚本改的还是其他方式），可以用MutationObserver，它能监听元素的子节点、文本内容、属性等各种变化：

<div id="thing">No</div>
<script>
    let elt = document.getElementById("thing")
    elt.addEventListener("click", () => elt.innerHTML = "Yes");

    // 创建观察者实例
    const observer = new MutationObserver(() => {
        alert("Running");
    });

    // 配置监听规则：监听子节点和文本内容变化
    observer.observe(elt, { childList: true, characterData: true });
</script>

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