當div的內容更改時如何調用js函數（請不要使用jquery）

Question

我正在尋找一種方法，只要修改特定元素（即div ， span ， p ）的內容，就可以調用JavaScript函數。 我可以想象會有一個像onchange這樣的標准事件，但是我知道onchange不適用於div而且我似乎找不到能這樣做的事件。

我已經研究過，但只能找到針對該問題的jQuery解決方案。

Answer 1

我認為您可以嘗試MutationObserver ，在IE11中，可以使用setInterval()進行后備。

更新

貝婁是我的答案。

var TextObserver = function () {
};

TextObserver.prototype.observe = function (target, callback) {
    var self = this;
    self.target = target;

    if (window.MutationObserver) {
        self.observer = new MutationObserver(function (mutations) {
            if (mutations.length) {
                var m = mutations[0];
                callback && callback(self.target.textContent, m.oldValue);
            }
        });

        self.observer.observe(self.target, {
            subtree: true,
            characterData: true,
            characterDataOldValue: true
        });
    } else { //for IE11-
        self._oldText = self.target.innerText;
        self.observer = setInterval(function () {
            var newText = self.target.innerText;
            if (self._oldText !== newText) { //changed
                callback && callback(newText, self._oldText);

                self._oldText = newText; //replace the old text;
            }
        }, 300);
    }

    return self;
};

new TextObserver().observe(document.getElementById('test'), function (newValue, oldValue) {
    alert('New value:' + newValue + '; oldValue: ' + oldValue);
});

您可以在jsfiddle上查看整個演示 。

Answer 2

在現代瀏覽器中，您可以使用Mutation觀察器 。 在較舊的瀏覽器（實際上是IE9-10）中，存在Mutation Events 。 IE <9沒有相應的事件。 在這些瀏覽器中，僅在進行某些更改后才會觸發onpropertychange 。

突變觀察者的一個例子：

var observer = new MutationObserver(function (m) { // Creates an observer
        console.log(m);
    }),
    elem = document.getElementById('test');

observer.observe(elem, {childList: true}); // Registers the observer
setTimeout(function () {
    elem.textContent += ' This is an added part triggering Mutation Observer.';
}, 2000);

jsFiddle上的現場演示。