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在大多數情況下都將具有更高的性能，因為任何輪詢與中斷實現都可以，但是兼容性很差

使用我的墊片的簡單自動滾動示例