6

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

我一直在寻找DOMNodeInserted和DOMNodeRemoved. 环顾四周，我找不到任何已经存在的东西。并非所有浏览器都支持该事件，并且目前已弃用。我有一个简单的（可能是幼稚的）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");
        };
    }
})();
4

1 回答 1

2

我最终编写了一个合理兼容的 polyfill来MutationObserver使用克隆的间隔检查childList（类似于@plalx 在他的评论中提到的），而不是依赖于MutationEvents. MutationEvents 在大多数情况下会更高效，因为任何轮询与中断实现，但兼容性很糟糕

使用我的 shim 的简单自动滚动示例

于 2013-11-19T23:07:29.877 回答