Question

给出HTML代码如下：

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

是否可以以编程方式将代码插入到一个元素中，该元素在文本发生变化时可以独立执行？例如，有了上述内容，我想将代码注入#watch，如果#watch的文本被更改，则会触发该代码。

例如，如果另一个对象将#watch的文本更改为＆＃34;我看到现在正在看我＆＃34;，那么我希望触发代码（并随后更改{{1}的文本}）。

Javascript有#change事件，它表示它会跟踪更改并执行与之关联的代码，但我只是在参考onchange个对象时才看到它。还有其他我可以使用的东西吗？

Answer 1

经典方法：DOMSubtreeModified

您可以通过侦听DOMSubtreeModified事件来观察DOM突变。另一个答案包括一个例子，所以我在此不再重复。请注意，这被标记为经典方法，因为MDN Event reference注释不推荐使用。

现代方法：MutationObserver

您可以使用MutationObserver观察DOM突变。我已经采用了您的示例HTML并创建了一个JSFiddle，用于报告mutate时观察到的DOM元素的更改！按下按钮。

HTML：

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

<button id="mutate">mutate!</button>

<div id="output" />

JavaScript的：

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();
});

很难做出一个真正有用的简短例子 - 一些输出来查看事件和一些触发事件的方法是需要的，所以上面的例子（和链接的JSFiddle）有这些。

使用哪种？

我建议使用一种混合解决方案，为没有浏览器平台（旧版浏览器）的浏览器平台提供兼容的后备MutationObserver。一个例子是webcomponentsjs。

JSFiddle：https://jsfiddle.net/nsbusxvk/1/

Answer 2

您可以通过

收听文字更改

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

演示：https://jsfiddle.net/3vxw7nw8/

如何将脚本插入HTML元素，以响应其内容的更改？

2 个答案: