javascript - 在动态创建的元素上添加事件监听器

Question

是否可以为所有动态生成的元素添加事件监听器(Javascript)？我不是该页面的所有者，因此我无法以静态方式添加监听器。

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

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

我需要一种方法来在页面上出现新元素时调用此代码，但我不能使用 jQuery(委托(delegate)、on 等不能在我的项目中工作)。我该怎么做？

Answer 1

听起来您需要在不退回到库的情况下采用委托(delegate)策略。我在这里的 fiddle 中发布了一些示例代码:http://jsfiddle.net/founddrama/ggMUn/

它的要点是在event 对象上使用target 来查找您感兴趣的元素，并做出相应的响应。像这样的东西:

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
  }
});

警告!如果您需要支持“旧 IE”，示例 Fiddle 仅包含符合标准的浏览器(即 IE9+，以及几乎所有其他版本)的代码attachEvent，那么您还需要围绕适当的 native 函数提供您自己的自定义包装器。 (关于这个有很多很好的讨论；我喜欢 Nicholas Zakas 在他的书 Professional JavaScript for Web Developers 中提供的解决方案。)