DOMNodeInserted / Removed事件Polyfill（或类似事件）

Question

我需要一种方法来侦听更改或删除节点的子级时的更改。 我制作了一个自动滚动插件，可以在添加新项目时使元素滚动到底部。 我正在监听的事件是DOMNodeInserted和DOMNodeRemoved 。

我一直在寻找DOMNodeInserted和DOMNodeRemoved DOMNodeInserted 。 环顾四周，我找不到任何已经存在的东西。 并非所有浏览器都支持该事件， 目前不建议使用该事件。我编写了一个简单的（可能很幼稚的）polyfill，但我对此写得很快，但我怀疑它是否有效。

我知道这些事件已被弃用 ，但是有没有更好的方法来监听子元素的更改？

(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

我最终使用对复制的childList间隔检查（类似于他的评论中的@plalx）为MutationObserver编写了一个合理合规的 polyfill，而不是依赖MutationEvent 。 MutationEvent在大多数情况下都将具有更高的性能，因为任何轮询与中断实现都可以，但是兼容性很差

使用我的垫片的简单自动滚动示例