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

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

注意事项！ 示例 Fiddle 仅包含符合标准的浏览器的代码（即 IE9+，以及几乎所有其他版本的浏览器）如果您需要支持“旧 IE”

attachEvent

，那么您将需要还围绕适当的本机函数提供您自己的自定义包装器。 （关于这个有很多很好的讨论；我喜欢 Nicholas Zakas 在他的书 Professional JavaScript for Web Developers 中提供的解决方案。）

Answer 2

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

如果你使用

createElement

添加，你可以试试这个：

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

然后你可以使用

masterEventHandler()

来处理所有的点击。

Answer 3

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

如果元素的

z-index

设置为

-1

或更小，您可能会认为 听众没有被绑定，实际上是，但是浏览器 认为您正在点击更高的

z-index

元素。

在这种情况下，问题不在于侦听器未被绑定，而是它无法获得焦点，因为其他东西（例如，可能是隐藏元素）在您的元素之上，并且取而代之的是焦点（意思是：事件没有被触发）。幸运的是，您可以通过右键单击该元素，选择“检查”并检查您单击的内容是否是正在“检查”的内容来轻松检测到这一点。

我用的是Chrome，不知道其他浏览器有没有这样的影响。但是，很难找到，因为在功能上，它在大多数方面都类似于听众未被绑定的问题。我通过从 CSS 中删除以下行来修复它：

z-index:-1

;

Answer 4

当您必须只支持“现代”网络浏览器（不是 Microsoft Internet Explorer）时，mutation observers 是完成此任务的正确工具：

new MutationObserver(function(mutationsList, observer) {
    for(const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            // put your own source code here
        }
    }
}).observe(document.body, {childList: true, subtree: true});

Answer 5

我创建了一个小函数来添加动态事件监听器，类似于

jQuery.on()

。

它使用与接受的答案相同的想法，只是它使用

Element.matches()

方法来检查目标是否与给定的选择器字符串匹配。

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

你可以从github获取if.

Answer 6

将匿名任务委派给动态创建的

HTML

elements

with

event.target.classList.contains('someClass')

1. 退货

   true

   或

   false

2. 例如。

let myEvnt = document.createElement('span');
myEvnt.setAttribute('class', 'someClass');
myEvnt.addEventListener('click', e => {
  if(event.target.classList.contains('someClass')){ 
    console.log(${event.currentTarget.classList})
}})

3. 参考：https://gomakethings.com/attaching-multiple-elements-to-a-single-event-listener-in-vanilla-js/
4. 好读：https://eloquentjavascript.net/15_event.html#h_NEhx0cDpml
5. MDN：https://developer.mozilla.org/en-US/docs/Web/API/Event/Comparison_of_Event_Targets
6. 插入点：

Answer 7

你可能想看看这个库：https://github.com/Financial-Times/ftdomdelegate 1,8K gzipped

它用于绑定到与给定选择器匹配的所有目标元素上的事件，而不管在注册时 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 8

使用

classList

属性一次绑定多个类

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