元素存在时触发事件

Posted 2023-03-28

【中文标题】元素存在时触发事件

【英文标题】：Trigger event when an element exists

【发布时间】：2012-12-22 12:09:49

【问题描述】：

我有一个空的div 元素：

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

在网页的某一点，一个p标签被动态添加到div中：

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

p 可以被删除，然后再次添加等等。

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

我找到了this的问题，但是涉及到外部插件。

难道没有一种简单的方法可以做到这一点吗？

【问题讨论】：

这个元素是如何添加和删除的？

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

如果插件在创建该元素之前没有运行一些可配置的回调，我会感到惊讶。这是一个示例：***.com/questions/2762458/…。 highlight 看起来很有希望。

【参考方案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);

之前的 sn-p 将每秒（1000 毫秒）检查 div.message 元素中的 <p> 元素，如果存在，会将它们的数量记录到控制台。

---

根据您的浏览器支持要求，您可以选择使用突变事件 -

Mutation events provide a mechanism for a web page or an extension to get notified about changes made to the DOM...

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

【讨论】：

突变事件现在被突变观察者取代

developer.mozilla.org/en-US/docs/Web/API/MutationEvent 已弃用。

非常惊讶这是最佳答案，有人可以评论不断（每秒一次）检查此元素是否存在的页面上的效果吗？我真的不喜欢这样的“轮询”，但它是一个快速简单的解决方案，直到我可以实现更好的东西，我觉得这样做会更好。作为突变观察者。

@SwimmingG - 不是 100% 这个答案在 9 年后的相关性。进行 1 秒的民意调查不应该对页面产生巨大影响，但这取决于页面上发生的其他情况。我不建议使用相同的方法来检测多个更改——同时创建太多的 setInterval 可能会对同时运行的任何其他 JS 产生负面影响。 Mutation observers 可能是更好的选择，具体取决于您的浏览器支持。

@Lix 谢谢，我会去看看 :)

【参考方案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 是一个包含大量信息的对象，其中包含 targetNode 已更改的内容，包括样式、addedNodes 等...

最后，您可以通过以下方式开始观察目标节点的突变（更改）：

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

第二个参数是一个“选项”对象，用于定义您要查找的突变（更改）类型。

希望对您有所帮助，我发现它是一个非常强大且被低估的 js 工具