如何用一个事件监听器统一处理不同按钮的颜色变化和结果提示？

本文共计828个文字，预计阅读时间需要4分钟。

原文简写：

在构建交互式网页（如小测验、问答页面）时，初学者常因对事件绑定机制理解不足，误为不同功能的按钮分别添加独立的事件监听器，最终引发状态覆盖、逻辑错乱等问题——例如：点击“Korean”按钮本应高亮绿色并显示“Correct”，却意外触发了表单校验逻辑，导致按钮变红、错误提示出现。

根本原因在于原始代码中存在两个独立的 click 监听器：

• 第一个遍历所有 <button>，为每个按钮绑定点击逻辑（适用于选择题）；
• 第二个单独为 #submit 绑定 click，且未阻止默认表单提交行为（虽加了 preventDefault()，但逻辑已与第一层重叠）。

当用户点击 #submit 时，它既匹配 querySelectorAll('button') 的遍历范围，又被第二个监听器捕获，造成双重执行，从而出现“正确答案却显示红色+Wrong”的异常现象。

✅ 正确解法是：统一入口，条件分流。