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

Question

是否可以向所有动态生成的元素添加事件监听器(javascript)？我不是页面的所有者,所以我不能以静态方式添加监听器.

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

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

我需要一个方法来在页面上出现新元素时调用此代码,但是我不能使用jQuery(委托,on等在我的项目中无法工作).我怎样才能做到这一点？

Answer 1

听起来你需要追求一个授权策略,而不会回到图书馆.我在这里发布了一些示例代码:http://jsfiddle.net/founddrama/ggMUn/

它的要点是使用对象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
  }
});

CAVEATS!示例Fiddle仅包含符合标准的浏览器的代码(即IE9 +,几乎所有其他人的版本)如果您需要支持"旧IE" attachEvent,那么您还需要提供自己的自定义包装器.适当的原生功能.(关于这一点有很多很好的讨论;我喜欢Nicholas Zakas在他的书"Web开发人员的专业JavaScript"一书中提供的解决方案.)

Answer 2

取决于您如何添加新元素.

如果你添加使用createElement,你可以试试这个:

var btn = document.createElement("button");
btn.addEventListener('click', masterEventHandler, false);
document.body.appendChild(btn);

然后,您可以masterEventHandler()用来处理所有点击.