时间戳

首页 > 解决方案 > appendchild 完成后是否有事件监听器可以使用？

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

问题描述

页面中已经加载了一个空的弹出 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 以供将来开发。

标签： javascriptpopupaddeventlistenerappendchild

解决方案

“加载”事件仅在页面加载时触发一次。
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

推荐阅读