MutationObserver和EventListeners

Question

我有这个高度具体的问题，我似乎无法解决，我需要听DOM更改事件，我已经使用Mutation Observer API，我可以向DOM添加div但是我需要能够对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组合到其中并设置常规事件监听器或者这是一个好主意？

Answer 1

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

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