如何为多个元素绑定addEventListener并获取点击对应值到外部作用域？

你的核心矛盾是点击事件是异步触发的离散事件，单次返回的Promise、同步变量读取都没法匹配这种多次触发、时机不确定的场景，下面是3种原生JS可用的方案：

方案1：传入回调函数处理（最直接） #

在getCategoryNameOnClick调用时传入你要处理分类名的逻辑函数，每次点击都会主动触发这个函数，把分类名传出去。
修改后的代码：

// 定义时接收回调参数
function getCategoryNameOnClick(onCategoryChange) {
    const cats = document.querySelectorAll('#categories li')
    cats.forEach(cat => {
        cat.addEventListener('click', () => {
            // 点击时把分类名传给外部传入的处理函数
            onCategoryChange(cat.textContent)
        })
    })
}

// 调用示例
getCategoryNameOnClick((categoryName) => {
    // 这里就能拿到每次点击的分类名，执行你需要的逻辑
    console.log('拿到的分类：', categoryName)
    // 比如更新页面、发请求等操作都可以写在这里
})

方案2：事件委托优化（适合分类数量多的场景） #

不用给每个li单独绑定事件，直接给父元素ul绑定事件，性能更好，新增分类也不用重新绑定事件：

function getCategoryNameOnClick(onCategoryChange) {
    const categoryList = document.querySelector('#categories')
    categoryList.addEventListener('click', (e) => {
        // 确保点击的是li元素
        if(e.target.tagName === 'LI') {
            onCategoryChange(e.target.textContent)
        }
    })
}

// 调用方式和方案1完全一致
getCategoryNameOnClick((categoryName) => {
    console.log('拿到的分类：', categoryName)
})

方案3：用发布订阅模式（适合多个地方需要监听分类变化的场景） #

如果有多个模块都需要拿到点击的分类名，可以用简单的发布订阅实现多监听：

// 简单的发布订阅实例
const categoryEmitter = {
    listeners: [],
    emit(category) {
        this.listeners.forEach(fn => fn(category))
    },
    subscribe(fn) {
        this.listeners.push(fn)
        // 返回取消订阅的方法
        return () => {
            this.listeners = this.listeners.filter(item => item !== fn)
        }
    }
}

// 绑定点击事件
function initCategoryListener() {
    document.querySelector('#categories').addEventListener('click', (e) => {
        if(e.target.tagName === 'LI') {
            categoryEmitter.emit(e.target.textContent)
        }
    })
}

// 初始化
initCategoryListener()

// 任意地方都可以订阅分类变化
const unsubscribe = categoryEmitter.subscribe((categoryName) => {
    console.log('模块1拿到分类：', categoryName)
})

// 不需要监听时调用取消订阅
// unsubscribe()

为什么你之前的方法不生效？ #

• Promise是单次不可逆的，一旦resolve就不会再触发回调，没法匹配多次点击的场景
• 用外部变量存储的话，你在点击事件外读取变量时，点击行为还没发生，拿到的是初始值；就算后续点击更新了变量，你也没法感知到变量更新的时机，自然没法触发对应逻辑

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