如何为按钮绑定点击事件监听器并获取被点击按钮的对应值

问题原因 #

• 你在点击回调函数中写了遍历所有.big-five-button按钮的逻辑，所以每次点击都会输出全部按钮的文本，这是不符合预期的直接原因
• 你没有接收事件对象参数，无法直接定位到当前被点击的按钮元素

修正后代码 #

// 获取所有目标按钮
const fiveButtons = document.getElementsByClassName("big-five-button");
// 用let声明循环变量，避免闭包导致的变量指向异常
for (let i = 0; i < fiveButtons.length; i++) {
    // 回调函数接收事件对象参数
    fiveButtons[i].addEventListener("click", function (e) {
        // 输出当前被点击按钮的文本内容
        console.log(e.currentTarget.textContent.trim());
    });
}

逻辑说明 #

• 绑定事件的回调函数第一个参数默认就是点击事件对象，你只需要在声明函数时接收这个参数就可以使用
• e.currentTarget指向绑定了当前事件监听器的元素，也就是你实际点击的按钮，不会受元素内部事件冒泡的影响，比e.target稳定性更高
• 用textContent而非innerHTML获取内容，可以避免拿到按钮内部可能存在的HTML标签，再搭配trim()去掉首尾多余空格，输出内容更精准
• 如果你必须使用var声明循环变量，需要用立即执行函数(IIFE)包裹事件绑定逻辑，用来隔离作用域，规避闭包导致的变量指向问题

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