如何利用e.target获取计算器按钮div下h2的唯一文本内容？

问题描述 #

我正在开发一款计算器，它包含16个用于输入公式的按钮，每个按钮都是带有button类的<div>元素，结构示例如下：

<div id="number7" class="button">
  <h2>7</h2>
</div>
<div id="number8" class="button">
  <h2>8</h2>
</div>

我已经通过document.querySelectorAll('.button')获取了所有按钮并绑定了点击事件，但点击时e.target可能返回<div>或内部的<h2>元素，导致无法稳定获取按钮对应的数字文本。目前我通过判断id的方式实现需求，但代码量接近100行，过于冗余。请问如何通过事件对象e稳定获取被点击div下h2的文本内容？

解决方案 #

方法1：使用closest()定位按钮容器 #

closest()方法可以从当前点击元素向上查找最近的匹配选择器的父元素，无论点击的是<div>还是<h2>，都能先定位到.button元素，再获取内部h2的文本：

const buttons = document.querySelectorAll('.button');
buttons.forEach(but => {
  but.addEventListener('click', function(e) {
    const buttonDiv = e.target.closest('.button');
    const numberText = buttonDiv.querySelector('h2').textContent.trim();
    equation.textContent = numberText;
  });
});

方法2：利用currentTarget属性 #

currentTarget始终指向绑定事件的元素（即我们的.button div），与点击位置无关，直接通过它获取内部h2即可：

const buttons = document.querySelectorAll('.button');
buttons.forEach(but => {
  but.addEventListener('click', function(e) {
    const numberText = e.currentTarget.querySelector('h2').textContent.trim();
    equation.textContent = numberText;
  });
});

方法3：事件委托（更高效） #

如果所有按钮都在同一个父容器内，可以只给父容器绑定一次事件，减少事件绑定数量，提升性能：

假设按钮的父容器为#calculator-container，代码如下：

<div id="calculator-container">
  <div id="number7" class="button">
    <h2>7</h2>
  </div>
  <div id="number8" class="button">
    <h2>8</h2>
  </div>
  <!-- 其他按钮 -->
</div>

const container = document.getElementById('calculator-container');
container.addEventListener('click', function(e) {
  const buttonDiv = e.target.closest('.button');
  if (buttonDiv) { // 确保点击的是按钮元素
    const numberText = buttonDiv.querySelector('h2').textContent.trim();
    equation.textContent = numberText;
  }
});

以上三种方法都能避免冗余的id判断，大幅简化代码，逻辑更清晰。

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