appendchild 完成后是否有事件监听器可供使用？答案

【问题标题】：Is there an event listener to use after appenchild is complete?appendchild 完成后是否有事件监听器可供使用？
【发布时间】：2019-06-10 15:03:38
【问题描述】：

页面中已经加载了一个空的弹出 div。当用户单击图像时，会创建一个 div 并将其发送到弹出窗口中。我正在寻找一个事件来收听 appendChild 的结尾：

let galerieImages = document.getElementsByClassName("field-galerie-image");
let galeriePopup = document.getElementById("galerie-popup");
for(let i = 0; i < galerieImages.length; i++) {
    galerieImages[i].addEventListener("click", function(e) {
        e.preventDefault();
        popup = document.createElement("div");
        popup.innerHTML = galerieImages[i].nextElementSibling.innerHTML;
        galeriePopup.appendChild(popup);
       popup.addEventListener("load", function(e) {
          console.log("popup loaded");
    })
};

在这段代码中，事件加载似乎不适用于 appendchild。在 appendchild 之后可以使用什么样的事件？
PS：在 popup.addEventListener 函数之前一切正常

编辑：
MutationObserver 函数无疑是最好的选择，但我使用了 setTimeout 替代方法，以使我的代码更短、更简单，以满足所需的小函数。
我将很快学习 MutationObserver 以供将来开发。

【问题讨论】：

也许你正在寻找类似MutationObserver的东西
Detect changes in the DOM的可能重复

标签： javascript popup addeventlistener appendchild

【解决方案1】：

“load”事件仅在页面加载时触发一次。
https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

可能你需要在弹出窗口显示后调用一个函数。
在这种情况下，请尝试使用 window.setTimeout()。

function onPopupLoaded() {
    console.log("popup loaded");
}

let galerieImages = document.getElementsByClassName("field-galerie-image");
let galeriePopup = document.getElementById("galerie-popup");
for(let i = 0; i < galerieImages.length; i++) {
    galerieImages[i].addEventListener("click", function(e) {
        e.preventDefault();
        popup = document.createElement("div");
        popup.innerHTML = galerieImages[i].nextElementSibling.innerHTML;
        galeriePopup.appendChild(popup);
        setTimeout(onPopupLoaded, 0);
    })
};

appendChild 完成的时间是在返回事件循环之后。
即点击事件监听函数结束后。
调用延迟为0的setTimeout()，回调函数onPopupLoaded()会在绘制完成后尽快执行。
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

【讨论】：