如何从addEventListener事件中返回特定值？求其他实现方案

首先要明确：你原代码里用forEach赋值给playerChoice是无效的——forEach本身没有返回值，而且点击事件的回调是异步触发的，回调里的return无法把值传递到外部的playerChoice变量中。下面是几种可行的替代方案：

方案1：直接用变量存储（最直观） #

声明一个可修改的变量，点击按钮时更新它，之后随时可以在代码的其他位置使用这个变量：

const buttons = document.querySelectorAll("button");
let playerChoice; // 用let允许后续修改

buttons.forEach(button => {
    button.addEventListener("click", event => {
        playerChoice = event.target.innerText.toLowerCase();
        // 这里可以直接调用逻辑处理函数，或者在其他地方使用playerChoice
        console.log(`当前玩家选择：${playerChoice}`);
    });
});

方案2：事件委托（适合动态按钮场景） #

不用给每个按钮单独绑定事件，监听父元素的点击事件，判断点击目标是按钮时再处理。这种方式适合页面后续会动态添加按钮的场景：

let playerChoice;

// 可以换成按钮所在的具体父容器，不一定是body
document.body.addEventListener("click", event => {
    if (event.target.matches("button")) { // 确认点击的是按钮元素
        playerChoice = event.target.innerText.toLowerCase();
        console.log(playerChoice);
        // 执行后续业务逻辑
    }
});

方案3：自定义事件（逻辑解耦） #

把玩家选择的动作封装成自定义事件广播出去，其他需要用到这个值的模块监听该事件即可。适合代码拆分、逻辑解耦的场景：

const buttons = document.querySelectorAll("button");

buttons.forEach(button => {
    button.addEventListener("click", event => {
        const choice = event.target.innerText.toLowerCase();
        // 触发自定义事件，把选择值放在detail属性中
        document.dispatchEvent(new CustomEvent("player-chosen", { detail: choice }));
    });
});

// 监听自定义事件，获取并使用玩家选择值
document.addEventListener("player-chosen", e => {
    const playerChoice = e.detail;
    console.log(`玩家选择了：${playerChoice}`);
    // 这里处理选择后的逻辑，比如和电脑对战、更新页面状态等
});

方案4：Promise（异步等待选择） #

如果需要在某个异步流程里等待用户完成选择（比如回合制游戏场景），可以用Promise封装选择逻辑：

function waitForPlayerChoice() {
    const buttons = document.querySelectorAll("button");
    return new Promise(resolve => {
        // 定义点击处理函数
        const handleClick = e => {
            const choice = e.target.innerText.toLowerCase();
            // 移除所有按钮的监听，避免重复触发
            buttons.forEach(btn => btn.removeEventListener("click", handleClick));
            resolve(choice);
        };
        // 给每个按钮绑定点击事件
        buttons.forEach(btn => btn.addEventListener("click", handleClick));
    });
}

// 使用示例：等待用户选择后执行后续逻辑
waitForPlayerChoice().then(playerChoice => {
    console.log(`玩家选择完毕：${playerChoice}`);
    // 比如调用对战逻辑
    // playGame(playerChoice);
});

每个方案对应不同的业务场景，你可以根据自己的代码结构和需求选择最合适的方式。

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