当元素存在时触发事件

Question

我有一个空的

元素：

<div class="message"></div>

在网页的某个位置，一个 p 标签会动态地添加到 div 中：

<div class="message">
  <p>Some Message</p>
</div>

可以删除 p，然后再重新添加。

如果 div.message 有一个 p 子元素，并执行一些代码，我应该使用什么事件来监听？

我找到了这个问题，但它涉及外部插件。

有没有简单的方法来完成这个操作？

- jviotti

---

这个元素是如何添加和移除的？ - Blender

通过jquery.validation插件，我可以在那里插入代码，但我正在寻找另一种解决方案，保持该代码不变。 - jviotti

如果插件在创建该元素之前没有可配置的回调函数运行，那我会感到惊讶。这里有一个例子: https://dev59.com/aE3Sa4cB1Zd3GeqPwJL5。`highlight`看起来很有前途。 - Blender

Answer 1

根据您的实现方式和需要识别变化的速度，您可能可以使用setInterval定期监视特定元素的内容来实现。

var checkContents = setInterval(function(){
  if ($("div.message p").length > 0){ // Check if element has been found
    // There is a <p> element in here!!
    console.log($("div.message p").length());
  }
},1000);

上面的代码片段每秒（1000毫秒）检查 div.message 元素中是否有 <p> 元素，如果存在则会将其数量记录到控制台。

---

根据你对浏览器支持的要求，你还可以使用变动事件 -

变动事件为网页或扩展程序提供一种机制，以便在 DOM 更改时得到通知...

var element = document.querySelectorAll('div.message')
element.addEventListener("DOMNodeInserted", function (ev) {
  // ...
}, false);

- Lix

---

变异事件现在已被变异观察者所取代。 - Peter P.

它已被弃用。https://developer.mozilla.org/zh-CN/docs/Web/API/MutationEvent - fuat

相当惊讶这是最佳答案，有人能否评论一下不断（每秒一次）检查该元素是否存在对页面的影响？我不太喜欢这样的“轮询”，但这是一个快速简单的解决方法，直到我能实现更好的东西，比如变动观察器。 - SwimmingG

@SwimmingG - 不确定这个答案在9年后是否还有参考价值。进行1秒钟的轮询不应该对页面产生太大影响，但这取决于页面上发生了什么其他事情。我不建议使用相同的方法来检测多个更改 - 创建太多同时运行的setInterval可能会对同时运行的任何其他JS产生负面影响。 根据您的浏览器支持情况，Mutation observers可能是更好的选择。 - Lix

@Lix 谢谢，我会去看一下的 :) - SwimmingG

Answer 2

Vanilla JS有一种很棒的方法来检测任何DOM更改（包括节点是否添加了任何子节点），请查看: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

但是这些文档并不是非常清晰，所以这里有一个快速的解释。

首先，您需要有一个要监听的目标节点：

const targetNode = document.getElementById('some-id');

然后，您需要在目标更改时创建一个触发器（称为MutationObserver）：

const observer = new MutationObserver(callbackFunction);

定义当目标更改时要发生的事情：

const callbackFunction = function(mutationsList) { // Use traditional 'for loops' for IE 11 for(const mutation of mutationsList) { if (mutation.type === 'childList') { console.log('A child node has been added or removed.'); } else if (mutation.type === 'attributes') { console.log('The ' + mutation.attributeName + ' attribute was modified.'); } } };

注意：mutationsList是一个带有大量信息的对象，其中包括style、addedNodes等目标节点已更改的内容...

最后，你可以使用以下代码开始观察目标节点的变化：

observer.observe(targetNode, { childlist: true, attributes: true });

第二个参数是一个“选项”对象，用于定义你要查找的变化类型。

希望这能有所帮助，我发现它在js中是一个非常强大且被低估的工具。

- sj.coded

---

这太棒了。在MutationObserver中使用document.contains(myElement)是我构建的最佳路线。另请参阅此链接。而且没有使用JQuery。 https://dev59.com/tWIj5IYBdhLWcg3wTDVn - Code Novice