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上查看整个demo。

Answer 2

在现代浏览器中，您可以使用Mutation observers。在旧浏览器（实际上是IE9-10）中有Mutation Events。 IE＆lt; 9没有相应的事件。在这些浏览器中，仅在某些更改后才会触发onpropertychange。

Mutation Observer的一个例子：

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的现场演示。

如何在div的内容发生变化时调用js函数（请不要jquery）

2 个答案: