MutationObserver和EventListeners

Question

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

为了更好的说明，这是我想要实现的。

1. 发送通知，并通过MutationObserver触发observe注册者>
2. 用户单击新添加的div会展开导航
3. 获取通知消息，对其进行解析，将其推送到数组，然后将其存储在localStorage中
4. 在下次单击时，用户被带到新页面，在该页面上，我还需要提取一些数据并将其附加到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 tap结合到其中并设置常规事件侦听器，或者甚至是个好主意？

我有这个似乎无法解决的高度特定的问题，我需要听DOM更改事件，并且我已经使用了Mutation Observer API，可以将div添加到DOM，但是我...

Answer 1

尽管我的用例要容易得多，但我也面临类似的问题。我只想在用户向下滚动新闻源时将onclick事件侦听器附加到每个元素。一种解决方案是简单地在HTML元素本身上使用“ onclick”属性，并使用“ this”即可执行所需的操作。

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