javascript - 将同一个事件监听器分配给多个按钮

Question

我发现在使用 iPad 时 touchstart 比 click 事件效果更好，所以我想使用 touchstart 而不是“click”。

问:如何重构以下的 JavaScript 部分？我曾经有一个 $(document).on('click','.number',pgm.number)

pgm = {}
pgm.number = function() {
  console.log(this) // etc
}
btn1.addEventListener('touchstart', pgm.number, false)
btn2.addEventListener('touchstart', pgm.number, false)
btn3.addEventListener('touchstart', pgm.number, false)
btn4.addEventListener('touchstart', pgm.number, false)
btn5.addEventListener('touchstart', pgm.number, false)
btn6.addEventListener('touchstart', pgm.number, false)
btn7.addEventListener('touchstart', pgm.number, false)
btn8.addEventListener('touchstart', pgm.number, false)
btn9.addEventListener('touchstart', pgm.number, false)
btn0.addEventListener('touchstart', pgm.number, false)

<button id="btn1" class="number">1</button>
<button id="btn2" class="number">2</button>
<button id="btn3" class="number">3</button>
<button id="btn4" class="number">4</button>
<button id="btn5" class="number">5</button>
<button id="btn6" class="number">6</button>
<button id="btn7" class="number">7</button>
<button id="btn8" class="number">8</button>
<button id="btn9" class="number">9</button>
<button id="btn0" class="number">0</button>

Answer 1

您可以按类 number 获取按钮并使用 Array#forEach 遍历它们函数并为每个项目添加事件处理程序。

document.querySelectorAll('.number')
        .forEach(btn => btn .addEventListener('touchstart', pgm.number, false))

看例子

function showId() {
   console.log(this.id) ;
}

document.querySelectorAll('.number')
            .forEach(btn => btn.addEventListener('click', showId, false))

<button id="btn1" class="number">1</button>
<button id="btn2" class="number">2</button>
<button id="btn3" class="number">3</button>
<button id="btn4" class="number">4</button>
<button id="btn5" class="number">5</button>
<button id="btn6" class="number">6</button>
<button id="btn7" class="number">7</button>
<button id="btn8" class="number">8</button>
<button id="btn9" class="number">9</button>
<button id="btn0" class="number">0</button>