TypeScript中如何正确选中多个按钮并绑定点击事件

• 选择器与HTML结构不匹配：逻辑中通过document.getElementsByClassName('btn')获取按钮节点，但HTML内所有按钮都未设置btn类名，最终拿到的是空集合，没有给任何按钮实际绑定点击事件。
• HTML写法不规范：多个按钮重复使用相同的id="btn"，DOM规范要求id在页面内全局唯一，重复id会引发各类选择匹配异常。
• 执行时机风险：若脚本在DOM节点渲染完成前运行，即使选择器写法正确也无法获取到目标节点，当前将script标签放在body底部暂时规避了该问题，但后续调整脚本位置时容易复现。

1. 修正HTML结构 #

给所有需要绑定事件的按钮添加统一的btn类名，移除重复的id，需要单独识别的功能按钮保留唯一id即可：

<div>
    <button class="btn style1" id="clearBtn">AC</button>
    <button class="btn style1" id="deleteBtn">Dell</button>
    <button class="btn">7</button>
    <button class="btn">8</button>
    <button class="btn">9</button>
    <button class="btn style2">×</button>
    <button class="btn">4</button>
    <button class="btn">5</button>
    <button class="btn">6</button>
    <button class="btn style2">÷</button>
    <button class="btn">1</button>
    <button class="btn">2</button>
    <button class="btn">3</button>
    <button class="btn style2" id="minusBtn">-</button>
    <button class="btn">0</button>
    <button class="btn">.</button>
    <button class="btn style2" id="equalBtn">=</button>
    <button class="btn style2" id="plusBtn">+</button>
</div>

2. 修正TypeScript绑定逻辑 #

添加DOM加载完成监听，规避脚本执行时机问题，同时补充TS类型断言避免类型报错：

document.addEventListener('DOMContentLoaded', () => {
    const input = document.getElementById('input') as HTMLParagraphElement;
    const result = document.getElementById('result') as HTMLParagraphElement;
    // 此时可正确获取所有带btn类的按钮
    const buttons = Array.from(document.getElementsByClassName('btn')) as HTMLButtonElement[];

    buttons.forEach(btn => {
        btn.addEventListener('click', (e: MouseEvent) => {
            const currentBtn = e.target as HTMLButtonElement;
            console.log('按钮点击触发，当前按钮内容：', currentBtn.textContent?.trim());
            // 在此处编写具体的点击回调逻辑即可
        });
    });
});

可选优化：事件委托方案 #

如果后续有动态新增按钮的需求，逐个绑定事件会出现新按钮无响应的问题，可以直接给按钮的父容器绑定事件，利用事件冒泡统一处理，性能更好也更易维护：

const btnContainer = document.querySelector('body > div > div:last-child') as HTMLDivElement;
btnContainer.addEventListener('click', (e: MouseEvent) => {
    const target = e.target as HTMLElement;
    // 仅当点击的是按钮元素时执行业务逻辑
    if (target.tagName === 'BUTTON') {
        console.log('按钮点击触发，当前按钮内容：', target.textContent?.trim());
        // 在此处编写具体的点击回调逻辑即可
    }
});

小提示：原代码中控制台打印的hfello存在拼写错误，若需要打印hello可自行修正，该问题不影响事件触发。

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