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。追加孩子后可以使用哪种事件？
PS：一切正常，直到popup.addEventListener函数

编辑：
MutationObserver函数肯定是最好的选择，但是我选择了setTimeout替代方法，以使我的代码更短，更简单，以实现所需的小函数。
我会尽快学习MutationObserver以便将来开发。

Answer 1

仅在页面加载一次时触发“加载”事件。
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完成后是否有事件监听器要使用？

1 个答案: