移除元素时的 DOM 事件

Question

移除元素时的 DOM 事件

当一个元素从 DOM 中直接或作为子树的一部分被移除时，有没有办法获得通知？似乎唯一可用的方法仅适用于直接删除的节点，但是当包含我的节点的整个子树被删除时，我想收到通知。

编辑

似乎问题并不完全清楚，所以我提出了一个挑战：https : //jsbin.com/winukaf

DOM 看起来像这样：

<body>
  <div class="root">
    <div class="great-grand-parent">
      <div class="grand-parent">
        <div class="parent">
          <div class="leaf">
            Am I still here?
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Run Code Online (Sandbox Code Playgroud)

挑战是在此处的任何元素被删除时发出通知，因为这将从 DOM 树中删除叶节点。

Answer 1

Tar*_*sri 8

有一个名为MutationObserver的 HTML5 API ，它有很好的支持

下面是一个例子：

// Element is the whatever subtree/element you need to watch over
var in_dom = document.body.contains(element);
var observer = new MutationObserver(function(mutations) {
    if (document.body.contains(element)) {
        if (!in_dom) {
            console.log("element inserted");
        }
        in_dom = true;
    } else if (in_dom) {
        in_dom = false;
        console.log("element removed");
    }

});
observer.observe(document.body, {childList: true, subtree: true});

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，1 月前
查看次数：	3904 次
最近记录：	7 年，1 月前