动态元素的AddEventListener +监听子元素

Question

是否有一种正确的方法可以添加一个也可以监听动态添加元素的事件监听器（这部分很简单），但是这个动态元素也会包含我想要包含在listen事件中的子节点。

在不起作用的小提琴之下+有效的jQuery解决方案，但我正在寻找原生的JS解决方案。

我知道两种可能的解决方案，但对我来说似乎都不优雅：
1）添加新元素时手动添加监听器
2）在document.body点击循环浏览所有event.target个父母以查看它是否有.item课程，对我来说似乎有些过分。

还有其他更好的方法吗？

Answer 1

您没有提供有关您想要完成的具体内容的更多信息，但如果您想要侦听动态添加元素的外观，我已经在MutationObserver中找到了成功：

// observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation);

    // include your code for reacting to each mutation here

  });    
});

// target node
var target = document.getElementById('my-id');

// configuration
var config = { attributes: true, childList: true, characterData: true };

// start observer
observer.observe(target, config);

// stop observer -- use this when you want to stop observing
// observer.disconnect();

每当＃my-id的子进行更改时，观察者将触发传递给mutation.forEach（）的函数

使用上面的代码，您应该能够检查控制台中记录的变异对象，以了解如何使用它们提供的数据来实现您期望的行为。

Answer 2

感谢朋友的小费，我设法为我的案子找到合适的解决方案。我使用e.target.matches()来确定点击的元素是否是我想要点击事件的项目的一部分。

这对现有和新添加的元素完美无缺，但有s

document.addEventListener('click', function(e) {
    if (e.target.matches('.item, .item *')) {
        // Do stuff
    }
})

需要注意的是，它可能需要一些额外的代码才能兼容浏览器（.matches()与所有浏览器不兼容，但有很多方法可以实现这一点）