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。

如何在新创建的元素上应用add_event_listener（）？

1 个答案: