Javascript 如何将脚本插入对其内容更改做出反应的HTML元素中？

给定的HTML代码如下所示：

<div id="group">
  <span id="watch">I say watch me</span>
  <span id="change">I say change me</span>
</div>

我说看着我
我说改变我

是否有可能通过编程方式将代码插入到一个元素中，该元素在其文本发生更改时独立运行？例如，在上面，我想将代码注入

#watch

中，如果

#watch

的文本发生更改，就会触发该代码

例如，如果另一个对象将

#watch

的文本更改为“我看到了立即监视我”，则我希望触发该代码（并随后更改

#change

）的文本）

---

Javascript有一个

onchange

事件，它说它跟踪更改并执行与之相关的代码，但我只在

对象中看到了这一点。我还可以使用其他类似的方法吗？

经典方法：domsubtreemedited

您可以通过侦听事件来观察DOM突变。另一个答案包括一个例子，所以我在这里不再重复。请注意，这被标记为经典方法，因为它已被弃用

现代方法：变异观察者

您可以通过使用。我以您的示例HTML为例，创建了一个报告DOM元素在发生变化时所观察到的更改的HTML！按钮按下了

HTML:

很难给出一个真正有用的简短示例——需要一些输出来查看事件和某种触发事件的方式，因此上面的示例（以及链接的JSFIDLE）就具备了这些功能

使用哪个？

我建议使用一种混合解决方案，为没有（旧浏览器）的浏览器平台提供兼容的回退观察服务器。这方面的一个例子就是

---

jsiddle:

您可以通过

$('#watch').bind("DOMSubtreeModified",function(){
  //do what you want here
});

---

演示：

是否尝试将侦听器绑定到元素的innerHTML的onchange？不是插入框架，而是使用脏检查来查看值何时更改。我认为这是一个可行的选择。如果值与原来的值不同，那么执行X…@Chizzle是的，这就是我要找的

var output = document.getElementById('output');

function onMutation(mutations) {
  mutations.forEach(function(mutation) {
    output.innerText += '\n' + mutation.type + ' ' + mutation.target.data;
  });
}


var watcher = new MutationObserver(onMutation);

// configuration of the observer:
var config = {
  attributes: true,
  childList: true,
  characterData: true,
  subtree: true
};
watcher.observe(document.getElementById('change'), config);

document.getElementById('mutate').addEventListener('click', function() {
  document.getElementById('change').innerText += ' ' + Date.now();
});

$('#watch').bind("DOMSubtreeModified",function(){
  //do what you want here
});