将同一事件侦听器分配给多个按钮

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> 

Answer 2

将touchstart添加到文档中，并使用事件目标检查元素是否具有className ".number" 。 这是最接近jQuery的事件委托：

pgm.number = function(e) {
    var t = e.target;                               // get the taget of the event (the element that got touchstarted)
    if(t.classList.contains("number")) {            // if it has a class of .number
        console.log(t);                             // log it (use it)
    }
}

document.addEventListener("touchstart", pgm.number, false);

使用click的示例：

 var pgm = {}; pgm.number = function(e) { var t = e.target; if (t.classList.contains("number")) { console.log(t); } } document.addEventListener("click", 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 3

 var buttons = document.querySelectorAll('.number'); buttons.forEach((button)=>{ button.addEventListener('click',(e)=>{console.log(e.target)},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> 

这是示例代码。

希望对您有帮助。