MutationObserver 和 EventListeners答案

【问题标题】：MutationObserver and EventListenersMutationObserver 和 EventListeners
【发布时间】：2023-03-25 02:35:02
【问题描述】：

我有一个我似乎无法解决的高度具体的问题，我需要监听 DOM 更改事件，我使用了 Mutation Observer API，我可以注册添加 div 到 DOM 但我需要能够对div 上的点击做出反应，并保留我通过导航返回的数据，因为我求助于localStorage，但当用户点击已动态添加的链接时，我似乎无法触发observe 方法。

为了更好地澄清这里是我想要实现的目标。

通知已发送，MutationObserver 注册它通过observe 触发
用户点击新添加的div会展开导航
获取通知消息，解析推送到数组，然后存储到localStorage
在下一次单击时，用户将被带到新页面，我还需要在其中获取一些数据并将其附加到 localStorage

到目前为止，我可以对新增的 DOM 做出反应。而且我可以过滤我需要的添加内容。

这里是代码

function watchForOrder() {
  var mutationObserver = new MutationObserver(function(mutation) {
    mutation.forEach(function(mutation) {
      console.log(mutation);
      //Possible place to create object to store information that I need.
    });
  });
  mutationObserver.observe(document.body, {
    // attributes: true,
    // characterData: true,
    childList: true,
    subtree: true
  });

我也无法断开 observer 的连接，因为我需要它一直监听新添加的内容，所以我担心它可能会严重影响性能。

tl;dr 我怎样才能将MutationRecord 结合起来并设置常规事件侦听器，或者这甚至是个好主意吗？

【问题讨论】：

为什么你需要使用突变观察者来观察添加的元素呢？您是否尝试扩充第三方代码？
对于动态添加的元素-> Event delegation
这是交易，我正在编写 Chrome 扩展程序，它将侦听事件和元素的添加，并创建我将发送到第 3 方端点进行分析的对象。编辑：它基本上是高度特定的抓取工具。
这个问题我已经看了好几遍了，还是不明白是什么问题。您能否说明代码当前产生的效果以及期望的效果是什么？无论如何，可以使用 console.time 或 devtools 性能分析器在不同复杂性的多个站点上解决与性能相关的问题。
我在新创建的 DOM 节点上附加事件处理程序时遇到问题，我需要知道何时单击，以便我可以测量从某些操作开始到通知解除的时间。由于某种原因，突变不会在鼠标点击新 div 时触发。因此，如果有办法将事件处理程序实际附加到 MutationRecord，那就太棒了。或者都可以通过 Observer 完成

标签： javascript dom-events addeventlistener mutation-observers

【解决方案1】：

尽管我的用例要容易得多，但我也遇到了类似的问题。当用户向下滚动新闻提要时，我只想为每个元素附加一个 onclick 事件侦听器。一种解决方案是简单地在 HTML 元素本身上使用“onclick”属性，并使用“this”你可以做你想做的事。

另一个解决方案是在变异观察者中注册一个事件监听器。每次突变观察者运行时（添加/删除元素时），事件侦听器将附加到所有子元素。这是超级干净的，然后在事件侦听器中，您可以调用一个函数，该函数具有使您想要的内容适用于 1 个元素的逻辑。

【讨论】：