标签：html5 dom mutation-observers html javascript

我有这些：

const element = this.getElementById("victim")

function releaseKraken(targetElement) {}

我希望从DOM中删除元素时调用该函数.

我可以想象这样的事情：

element.onRemove(() => releaseKraken(element))

我知道我需要MutationObserver,但是我发现的所有文档都集中在观察给定元素的孩子,而我需要观察元素本身.

UPD：问题How to detect element being added/removed from dom element?

的重点是看给定父母的孩子.我不想看孩子或父母.我想从DOM中删除给定元素时收到通知.不是孩子.而且我不想在给定元素的父对象上设置观察者(除非这是唯一的选择),因为这会影响性能.

UPD2：如果我在文档上设置MutationObserver,这将导致每个会话触发回调数千次甚至数百万次,并且每次回调将不得不过滤大量已删除元素以查看其是否包含一个问题.那太疯狂了.

我需要像上面显示的简单的东西.我希望回调仅被触发一次：给定元素被删除时.

解决方法:

如您所说,MutationObserver仅允许您检测何时操纵元素的子代.这意味着您需要聆听父级并检查所做的更改,以查看目标元素是否已删除.

function onRemove(element, callback) {
  const parent = element.parentNode;
  if (!parent) throw new Error("The node must already be attached");

  const obs = new MutationObserver(mutations => {
    for (const mutation of mutations) {
      for (const el of mutation.removedNodes) {
        if (el === element) {
          obs.disconnect();
          callback();
        }
      }
    }
  });
  obs.observe(parent, {
    childList: true,
  });
}

然后用你的例子代替

element.onRemove(() => releaseKraken(element));

你可以做

onRemove(element, () => releaseKraken(element));

如果您正在做的只是观看单个元素,则此方法应该足够快.尽管看起来像是一个不错的循环,但是removeNodes可能不止一个节点是非常罕见的,除非有东西一次全部删除大量兄弟姐妹,否则变异也将非常小.

您也可以考虑做

callback(el);

这会让你做

onRemove(element, releaseKraken);

标签：html5,dom,mutation-observers,html,javascript
来源： https://codeday.me/bug/20191109/2010951.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。