appenchild完成后是否有事件监听器可以使用？

Question

页面中已经加载了一个空的弹出窗口 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。

Answer 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

appenchild完成后是否有事件监听器可以使用？

Is there an event listener to use after appenchild is complete?

javascript

popup

appendchild

addeventlistener