Question

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

我在寻找DOMNodeInserted and DOMNodeRemoved的填充物。环顾四周，我无法找到任何已经存在的东西。所有浏览器都不支持该事件，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

我最后使用克隆MutationObserver的间隔检查（{类似于@plalx在评论中提到的内容）为childList编写a reasonably compliant polyfill，而不是回到MutationEvent }秒。对于大多数情况，MutationEvent对于任何轮询和中断实现都会更高效，但兼容性很糟糕

Simple auto scrolling example using my shim

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

1 个答案: