javascript - DOMNodeInserted/Removed 事件 polyfill(或类似事件)

Question

我需要一种方法来监听节点的子节点何时被移除或添加的变化。我制作了一个自动滚动插件，可以在添加新项目时将元素滚动到底部。我正在收听的事件是 DOMNodeInserted 和 DOMNodeRemoved。

我正在寻找 DOMNodeInserted and DOMNodeRemoved 的 polyfills .环顾四周，我找不到任何已经存在的东西。并非所有浏览器都支持该事件，它是 currently deprecated .我有一个简单的(可能是幼稚的)polyfill，我写得很快，但我怀疑它是否有效。

我知道这些events are deprecated ，但是是否有更好的方法来监听元素子元素的变化？

(function() {
    var works = false;
    var $test = document.createElement("div");
    var $testchild = document.createElement("a");

    $test.addEventListener("DOMNodeInserted", function() {
        works = true;
    }, false);

    $test.appendChild($testchild);

    if(!works) {
        var nodeproto = Node.prototype;
        var nativeAppend = nodeproto.appendChild;
        var nativeRemove = nodeproto.removeChild;

        nodeproto.appendChild = function() {
            nativeAppend.apply(this, arguments);
            this.fireEvent("DOMNodeInserted");
        };

        nodeproto.removeChild = function() {
            nativeRemove.apply(this, arguments);
            this.fireEvent("DOMNodeRemoved");
        };
    }
})();

Answer 1

我最后写了 a reasonably compliant polyfill对于 MutationObserver，使用克隆的 childList 的间隔检查(类似于 @plalx 在他的评论中提到的内容)，而不是退回到 MutationEvent。 MutationEvent 对于大多数场景来说性能更高，因为任何轮询与中断实现，但兼容性很差

Simple auto scrolling example using my shim