JS:检测被监视的div(或将事件侦听器更改为innerHTML)的dom突变

Question

:)

我正在使用 NicEdit 所见即所得编辑器。DIV 使用隐藏的文本区域字段进行修补。

问题是所有更改都只是同步在提交((上。

现在我需要一种方法来倾听变化。例如，在更改内容(输入((标记为未保存(时更改字段的背景颜色。但是据我所知，没有用于更改的InnerHTML的addEventListener。 因此，也许可以使用像domMutationObserver这样的回调函数。但我不知道如何处理这个问题。

JS代码：

let domField = document.querySelector('.contents .subpage[data-pagename="Index"][data-culture="en-US"] .nicEdit-main');

我可以检测到编辑器div的选择器。那么如何检测这个元素/节点内部的变化呢？

我读了一些关于"观察者"来检测 dom 突变的东西。也许有人可以给我一个简单易行的例子。

谢谢一切。 ;)

 

---

编辑：我希望我们都同意我不会设置间隔(只是为了节省浏览器性能(。但是，是的，这可能是一种方法。因此，观察突变或更改我的DIV元素的内部HTML。

伪代码：

domElement.innerHTML.watch('change', elem => {
elem.classList.add('changed'); //or unsaved
});

Answer 1

在做了一些研究之后，我设法创建了一个 Observer.
不幸的是，它会在运行时每次 DOM 更改时触发。

JS代码：

let domElement = document.querySelector('.contents .subpage[data-pagename="Index"] .culture[data-culture="de-DE"] .nicEdit-main');
let observer = new window.MutationObserver((e) => {
console.log(domElement.innerHTML);
});
observer.observe(domElement, {
characterData: true,
subtree: true
});

与此同时，我认为观看模糊事件就足够了。然后应该检查"新"innerHTML是否与"旧"(或最初加载(innerHTML不同。

JS代码：

let domElement = document.querySelector('.contents .subpage[data-pagename="Index"] .culture[data-culture="de-DE"] .nicEdit-main');
domElement.addEventListener('blur', (e) => {
//check .innerHTML changed (compared to init value)
alert('onblur');
});

当然，这不是DOM观察者/监视，但它使浏览器的性能损失大大降低，如果不是每个单独的更改都会触发，而只是用户的离开焦点交互和手动检查.innerHTML更改。

Answer 2

也许Proxy可以解决它。当样式的某些属性发生变化时，set会调用。

var app = document.getElementById('app')
var handle = {
get(target, property, value, receive) {
return target[property]
},
set(target, property, value, receive) {
// callback()
Reflect.set(target, property, value)
}
}
var a = new Proxy(app, handle)
a.innerHTML = 2
a.style.background = "red"
a.style.height = "200px"
a.style.width = "200px"