在动态创建的元素上添加事件侦听器

Question

是否可以向所有动态生成的元素添加事件侦听器（Javascript）？我不是页面的所有者，因此无法以静态方式添加侦听器。

对于页面加载时创建的所有元素，我使用：

doc.body.addEventListener('click', function(e){
//my code
},true);

当页面上出现新元素时，我需要一种方法来调用此代码，但是我无法使用jQuery（在项目中无法使用elegate，on等）。我怎样才能做到这一点？

Answer 1

听起来您需要执行委派策略而又不退回图书馆。我在此处的小提琴中发布了一些示例代码：

要点是使用对象target上的event来查找您感兴趣的元素，并做出相应的响应。就像是：

document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // do your action on your 'li' or whatever it is you're listening for
  }
});

小心！ 示例Fiddle仅包含用于符合标准的浏览器的代码（即IE9+，以及几乎每个其他版本的代码）。如果您需要支持“旧IE”attachEvent，则还需要围绕该浏览器提供自己的自定义包装适当的本机功能。