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！示例小提琴仅包含符合标准的浏览器的代码（即IE9 +，以及几乎所有其他人的版本）如果您需要支持“旧IE”{{1那么你也想要在适当的原生函数周围提供自己的自定义包装器。（关于这一点有很多很好的讨论;我喜欢Nicholas Zakas在他的书 Web开发人员的专业JavaScript 中提供的解决方案。）

Answer 2

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

如果您使用createElement添加，则可以尝试：

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

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

Answer 3

我创建了一个小函数来添加动态事件监听器，类似于jQuery.on()。

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

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

您可以获得from github。

Answer 4

将匿名任务委派为使用HTML动态创建的elements event.target.classList.contains('someClass')

返回true或false
例如 let myEvnt = document.createElement('span'); myEvnt.setAttribute('class', 'someClass'); myEvnt.addEventListener('click', e => { if(event.target.classList.contains('someClass')){ console.log(${event.currentTarget.classList })}})
参考：https://gomakethings.com/attaching-multiple-elements-to-a-single-event-listener-in-vanilla-js/
好的阅读：https://eloquentjavascript.net/15_event.html#h_NEhx0cDpml
MDN：https://developer.mozilla.org/en-US/docs/Web/API/Event/Comparison_of_Event_Targets
插入点：

Answer 5

一个值得注意的问题可能是我刚刚发现的这个事实：

如果某个元素的z-index设置为-1或更小，您可能会认为监听器实际上没有绑定，但是浏览器没有绑定认为您单击的是更高的z-index元素。

在这种情况下，问题不在于听众没有被绑定，而是它无法获得焦点，因为其他东西（例如，一个隐藏的元素）位于您的元素之上，而是关注的焦点（意味着：事件未触发）。幸运的是，您可以通过右键单击元素，选择“检查”，然后检查您单击的内容是否为“被检查”，来轻松地检测到这一点。

我正在使用Chrome，并且我不知道其他浏览器是否受到如此影响。但是，很难找到它，因为从功能上讲，它在很大程度上类似于未绑定侦听器的问题。我通过从CSS中删除以下行来修复它：z-index:-1;

Answer 6

您可能想看一下这个库：https://github.com/Financial-Times/ftdomdelegate，已压缩1,8K

它用于绑定到与给定选择器匹配的所有目标元素上的事件，而不管注册时DOM中是否存在任何东西。

您需要导入脚本，然后像这样实例化它：

  var delegate = new Delegate(document.body);
  delegate.on('click', 'button', handleButtonClicks);

  // Listen to all touch move
  // events that reach the body
  delegate.on('touchmove', handleTouchMove);

});

Answer 7

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

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

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

7 个答案: