我必须在元素上注册以跟踪添加子元素的事件类型

Question

我正在寻找有关如何将元素添加到我的div的信息的方式。

样式元素是由第三方组件添加的，我只知道将哪个元素添加到其中。我可以在div上使用带有DOM断点的DevTools进行跟踪，但这可能是Chrome的内部功能。

有没有一种方法可以监听与直接子树修改有关的触发事件？像这样的东西：

document.getElementById("my-div").addEventListener("subtree-modification", function(event) { ... my event handler });

我在文档中找到了有关MutationObserver的信息。这是前进的方向吗？能给我一些例子吗？

Answer 1

正如您提到的，可以使用MutationObserver完成。

Answer 2

MutationObserver将起作用。 （相反，不建议通过MutationObserver进行突变事件，并且该过程比较缓慢，最好避免这些事件。）例如：

addEventListener

console.log('script start');
const myDiv = document.getElementById("my-div");

new MutationObserver((mutations, observer) => {
  console.log('Change observed');
  // Once the change is seen, don't need the observer anymore
  observer.disconnect();
})
  .observe(myDiv, { childList: true });


setTimeout(() => {
  myDiv.appendChild(document.createElement('span')).textContent = 'span content';
}, 3000);

<div id="my-div">my div </div>将监视所观察元素的任何直接子项的更改。如果要监视对[[任何子孙的更改，请同时使用childList: true：

subtree: true

但是深入的观察者很昂贵-请记住，一旦他们完成了您所需要的操作，就将其删除。