在dynamic创build的元素上添加事件监听器

是否有可能添加事件监听器（JavaScript）所有dynamic生成的元素？ 我不是页面的所有者，所以我不能以静态的方式添加一个监听器。

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

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

我需要一个方法来调用这个代码，当新的元素出现在页面上，但我不能使用jQuery（委托，上等不能在我的项目中工作）。 我怎样才能做到这一点？

这听起来像你需要追求一个代表团战略，而不会退回到图书馆。 我已经发布了一些示例代码在小提琴在这里： http : //jsfiddle.net/founddrama/ggMUn/

它的要点是使用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 ，那么您还需要提供自己的自定义封装正确的本地function。 （关于这方面有很多很好的讨论，我喜欢Nicholas Zakas在他的书“ Professional JavaScript for Web Developers”中提供的解决scheme。

取决于你如何添加新的元素。

如果你使用createElement添加，你可以试试这个： 

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

然后，您可以使用masterEventHandler()来处理所有的点击。

我创build了一个小函数添加dynamic事件侦听器，类似于jQuery.on() 。

它使用与接受的答案相同的思想，只是它使用Element.matches()方法来检查目标是否匹配给定的select器string。 

 addDynamicEventListener(document.body, 'click', '.myClass, li', function (e) { console.log('Clicked', e.target.innerText); });

你可以从github得到。

如果你真的不想/不能使用jQuery或其他的JS库，你只剩下实现一个自动化的事件监听器添加到新添加的元素。

你可以想到的一种方法是，例如，覆盖HTMLElement.prototype.appendChild甚至是JS中允许的document.createElement方法。

然后，每当元素被添加/创build时，都可以做任何你需要的。

使用classList属性一次绑定多个类 

 var container = document.getElementById("table"); container.classList.add("row", "oddrow", "firstrow");
Interesting Posts