Question

DOMNodeInserted event has been deprecated和所有突变事件已被突变观察者取代。

但是，within mutation observers只有配置选项可用于监视节点属性，内容和子节点的突变。没有任何关于它在DOM树中的位置的突变。

我能想到的一个“解决方案”是从document.body中搜索一下我正在添加的目标节点的一个突变，但这是一种非常糟糕的做事方式。

那么用Mutation Observers替换已弃用的DOMNodeInserted的预期方法是什么？

编辑：发现可能重复What is the most efficient way of detecting when an element with a particular ID is inserted in the DOM

再一次，SO：The searchbar works better with Tags than Questions. Explaining this could reduce duplicates and save users time

下面是一些代码，您可以看到没有可用的变异观察器配置选项响应添加到页面的元素：

var addMe = document.createElement("div");
var config = {
  attributes: true,
  childList: true,
  characterData: true
}
var observer = new MutationObserver(function(mutations) {
  console.log(mutations);
});
observer.observe(addMe, config);

function appendAddMe() {
  document.body.appendChild(addMe);
}

div {
  height: 50px;
  width: 50px;
  background: #969;
}

<button onclick="appendAddMe()">Append addMe</button>

Answer 1

我并不认为这是问题的答案，但我还是想分享它，因为它总比没有好。

这个问题有一些很好的答案：What is the most efficient way of detecting when an element with a particular ID is inserted in the DOM

特别是，这个答案：https://stackoverflow.com/a/25107064/4808079 来自schettino72

iframe元素触发加载/卸载事件。您可以在要观看的元素中插入一个哑的iframe ...并自行触发原始元素中的“加载”事件。

function watch($ele){
    var $iframe = document.createElement('iframe');
    $iframe.style.display = 'none';
    $ele.appendChild($iframe);
    $iframe.addEventListener('load', function(){
      var event = new CustomEvent('load');
      $ele.dispatchEvent(event);
    });
}

我仍然希望保持这个问题，因为这是一个黑客，而不是一个真正的答案。 DOMNodeInserted可能没有被弃用，所以每个人都可以这样做。

什么是DOMNodeInserted的新等价物？

1 个答案: