纯JavaScript实现计算器：不使用onclick点击按钮显示对应数字

不用行内onclick属性的前提下，我们可以通过addEventListener绑定点击事件实现需求，推荐使用事件委托的写法，性能更高，后续新增按钮也不需要重复绑定事件。

完整代码示例 #

HTML部分 #

首先补全计算器屏幕的结构，同时给所有按钮套一个父容器方便做事件委托：

<!-- 计算器屏幕 -->
<div id="screen" style="width: 220px;height: 36px;border: 1px solid #eee;border-radius: 4px;margin-bottom: 12px;padding: 0 10px;line-height: 36px;"></div>

<!-- 数字按钮父容器 -->
<div class="num-btn-wrapper">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>6</button>
  <button>8</button>
  <button>9</button>
  <button>10</button>
</div>

JavaScript部分 #

// 获取屏幕元素
const calcScreen = document.getElementById('screen')
// 获取按钮父容器
const btnWrapper = document.querySelector('.num-btn-wrapper')

// 给父容器绑定点击事件，利用事件冒泡捕获子按钮的点击行为
btnWrapper.addEventListener('click', (e) => {
  // 仅当点击的目标是按钮元素时触发逻辑
  if(e.target.tagName === 'BUTTON') {
    // 直接覆盖屏幕内容，无需额外清空之前的输入
    calcScreen.textContent = e.target.textContent
  }
})

可选写法：逐个绑定按钮事件 #

如果不想用事件委托，也可以直接给所有按钮单独绑定事件：

const calcScreen = document.getElementById('screen')
// 获取所有数字按钮
const numBtns = document.querySelectorAll('button')

numBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    calcScreen.textContent = this.textContent
  })
})

内容的提问来源于stack exchange，提问作者jerome richard A R