JavaScript中如何将函数内动态创建的元素传递给其他独立函数

你当前代码运行异常的核心原因有两个：

• 函数内部用const声明的元素变量属于函数作用域，外部作用域拿不到引用
• 给lightboxContainer绑定事件的代码在页面初始化阶段就执行了，这时候元素还没被创建，就算变量能访问到也会拿到空值

下面是三种可落地的实现方式，按推荐优先级排序：

方案1：函数返回元素引用，创建后再绑定交互 #

这是最符合函数封装逻辑的方案，不会污染全局作用域，逻辑边界清晰。
核心思路是让创建函数把需要外部操作的元素作为返回值暴露，所有和该元素相关的交互逻辑，都放在元素创建完成、拿到引用之后再执行。
修正后完整代码：

// 补全原代码缺失的body声明
const body = document.body;
const lightBoxEnabled = document.querySelectorAll(".lightbox-gallery-element");

function createLightbox() {
    // 内部创建DOM结构
    const lightboxContainer = document.createElement('div');
    lightboxContainer.classList.add('lightbox-container', 'active');

    const lightboxImageWrapper = document.createElement('div');
    lightboxImageWrapper.classList.add('lightbox-image-wrapper');
    lightboxContainer.append(lightboxImageWrapper);

    const lightboxImg = document.createElement('img');
    lightboxImg.classList.add('lightbox-img');
    lightboxImageWrapper.append(lightboxImg);

    // 挂载到页面
    body.append(lightboxContainer);
    body.classList.add('overflow-hidden');

    // 对外暴露需要操作的元素引用
    return {
        container: lightboxContainer,
        img: lightboxImg
    };
}

function hideLightBox() {
    body.classList.remove('overflow-hidden');
    // 关闭时记得把动态创建的元素从DOM移除，避免重复堆积
    const lightbox = document.querySelector('.lightbox-container');
    if (lightbox) lightbox.remove();
}

// 绑定缩略图点击事件
lightBoxEnabled.forEach(image => {
    image.addEventListener('click', () => {
        // 创建元素时拿到引用
        const lightboxElements = createLightbox();
        // 拿到引用后再绑定容器点击关闭事件
        lightboxElements.container.addEventListener('click', (e) => {
            // 仅点击容器空白区域时关闭，避免点击图片也触发关闭
            if (e.target === lightboxElements.container) {
                hideLightBox();
            }
        });
    });
});

方案2：事件委托，无需传递元素引用 #

如果不想处理元素引用的传递问题，直接用事件委托是最省事的方案：把事件绑定到页面初始化时就已经存在的父级元素（比如body）上，靠事件冒泡机制匹配动态创建的目标元素即可，哪怕元素是后续才创建的也能正常触发事件。
示例代码：

const body = document.body;
const lightBoxEnabled = document.querySelectorAll(".lightbox-gallery-element");

// 初始化阶段直接绑定委托事件，不需要等lightbox创建
body.addEventListener('click', (e) => {
    if (e.target.classList.contains('lightbox-container')) {
        hideLightBox();
    }
});

function createLightbox() {
    // 内部创建逻辑不需要返回值，正常创建挂载即可
    const lightboxContainer = document.createElement('div');
    lightboxContainer.classList.add('lightbox-container', 'active');

    const lightboxImageWrapper = document.createElement('div');
    lightboxImageWrapper.classList.add('lightbox-image-wrapper');
    lightboxContainer.append(lightboxImageWrapper);

    const lightboxImg = document.createElement('img');
    lightboxImg.classList.add('lightbox-img');
    lightboxImageWrapper.append(lightboxImg);

    body.append(lightboxContainer);
    body.classList.add('overflow-hidden');
}

function hideLightBox() {
    body.classList.remove('overflow-hidden');
    const lightbox = document.querySelector('.lightbox-container');
    if (lightbox) lightbox.remove();
}

lightBoxEnabled.forEach(image => {
    image.addEventListener('click', () => createLightbox());
});

这个方案代码量更少，不需要重复给新创建的元素绑定事件，适合动态元素频繁增删的场景。

方案3：高层作用域变量存储引用（非必要不推荐） #

如果确实需要在多个独立逻辑里全局访问动态元素，可以在函数外部声明更高作用域的变量，元素创建时把引用赋值给外部变量：

// 模块/全局作用域声明变量存引用，初始值为null
let lightboxContainer = null;
let lightboxImg = null;

function createLightbox() {
    const container = document.createElement('div');
    // ... 其余DOM创建逻辑不变
    // 给外部变量赋值
    lightboxContainer = container;
    body.append(container);
    body.classList.add('overflow-hidden');
}

注意：这种方式必须等createLightbox执行完成后再访问外部变量，否则会拿到null报错；同时全局变量过多容易出现命名冲突、引用被意外篡改的问题，优先用前两种方案。

额外提醒：原代码的hideLightBox只移除了body的类，没有删除动态创建的lightbox节点，多次点击缩略图会在页面里堆积大量无用DOM节点，记得补上节点移除逻辑。

内容的提问来源于stack exchange，提问作者Mada