如何检测JavaScript修改标签文本的变化并触发指定函数

嘿，我懂你的困扰——你用JS修改<p>标签的文本后，绑定的onchange函数没执行对吧？这其实是个常见的小坑：onchange事件天生是给表单控件（比如input、select、textarea）设计的，只有当用户通过交互修改这些控件的值，并且控件失去焦点时，这个事件才会触发。像<p>这种普通元素，哪怕你用JS改了它的innerText，浏览器也不会自动抛出change事件。

下面给你两种实用的解决方案，按需选择：

方案1：手动触发change事件 #

最简单的办法就是在修改完文本后，手动调用dispatchEvent来触发change事件，这样绑定的myFunction就会被执行了。修改后的代码如下：

<!DOCTYPE html>
<html>
<body>
<h1 id="result"></h1>
<p id="demo" onchange="myFunction()">Click button to change my HTML content</p>
<button id="press" onclick="changeText()">button</button>
<script>
function changeText() {
  const demoElement = document.getElementById("demo");
  demoElement.innerText = "hhhhhhhhhh";
  // 手动触发change事件
  demoElement.dispatchEvent(new Event('change'));
}
function myFunction() {
  document.getElementById("result").innerText = "Text changed!";
}
</script>
</body>
</html>

方案2：用MutationObserver监听文本变化 #

如果你希望不管通过什么方式修改这个<p>的文本（比如后续可能有其他JS逻辑修改，或者元素设为可编辑让用户修改），都能自动触发函数，那MutationObserver会是更靠谱的选择。它可以监听DOM元素的各种变化，包括文本内容的改动：

<!DOCTYPE html>
<html>
<body>
<h1 id="result"></h1>
<p id="demo">Click button to change my HTML content</p>
<button id="press" onclick="changeText()">button</button>
<script>
function changeText() {
  document.getElementById("demo").innerText = "hhhhhhhhhh";
}
function myFunction() {
  document.getElementById("result").innerText = "Text changed!";
}

// 创建一个观察者实例，指定变化发生时的回调
const textObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 检查是否是文本内容相关的变化
    if (mutation.type === 'characterData' || mutation.type === 'childList') {
      myFunction();
    }
  });
});

// 配置观察选项：监听子节点变化和文本内容变化，包括子元素的文本
const observerConfig = { childList: true, characterData: true, subtree: true };

// 开始观察目标<p>元素
textObserver.observe(document.getElementById("demo"), observerConfig);
</script>
</body>
</html>

这种方式的优势在于它是被动监听，不管文本被什么方式修改，只要发生变化就会触发你的函数，适合更复杂的场景。

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