如何在新創建的元素上應用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事件觸發后才創建的元素，可以創建委托偵聽器 。

這是一種可能的方法。 假設您要監聽id myNewButton的動態添加button的click事件：

 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 。