javascript - 如何在新创建的元素上应用 add_event_listener()？

Question

当 DOM 已加载时，我正在使用此脚本应用 add_event_listener() 。

document.addEventListener("DOMContentLoaded",regFunct,false);

然后我列出函数内部的所有regFunct函数。从服务器加载的所有函数regFunct都在工作，除了使用appendChild().

function regFunct(){
    //doSomething1
    //doSomething2 (create new HTML element)

    //doSomething3 (apply add_event_listener() after
    //              the new element created by doSomething2)
}

doSomething3 不起作用。

Answer 1

对于仅在事件触发后创建的元素DOMContentLoaded，您可以创建委托侦听器。

这是一种可能的方法。假设您想 click在动态添加的事件上button监听事件id myNewButton：

document.addEventListener('DOMContentLoaded', function(event) {
  // lets create and add the button only when DOMContentLoaded has already fired
  let btn = document.createElement('button');
  btn.id = "myNewButton";
  btn.type = "button";
  btn.textContent = "My shiny new button";
  document.getElementById('app').appendChild(btn);
})

// before the above is executed, let's add a delegate click listener
document.addEventListener('click', function(event) {
  if (event.target.id === 'myNewButton') {
    event.target.textContent += " was clicked!";
  }
})

<div id="app"></div>

请注意，这只适用于冒泡的事件。默认情况下不冒泡的事件示例：scroll, blur, focus.