如何设置全局单击侦听器以从许多按钮中获取值？

Question

我有一组按钮，每个按钮都有不同的值。 我需要添加一个事件监听器来监听它何时被点击。 单击的按钮的值将被推送到不同的数组中。

我觉得我需要forEach，但不太适合。

function placeBet() {
  var betBtn_nodelist = document.querySelectorAll('.bet_amount > button');
  var betButtonsArr = Array.prototype.slice.call(betBtn_nodelist);

  for (var i = 0; i < betButtonsArr.length; i++) {
    betButtonsArr[i];
  }
}

<div class="bet_amount">
  <button class="five" value="5">5</button>
  <button class="ten" value="10">10</button>
  <button class="fifty" value="50">50</button>
  <button class="hundred" value="100">100</button>
</div>

Answer 1

您必须为array 中的每个项目附加一个click 事件处理程序。

result = [];
function placeBet(){
    var betBtn_nodelist = document.querySelectorAll('.bet_amount > button');
    var betButtonsArr = Array.prototype.slice.call(betBtn_nodelist);
    for (let i = 0; i < betButtonsArr.length; i++) {
       betButtonsArr[i].onclick = function(){
         result.push(this.value);
         console.log(result);
       }
    }
}
placeBet();

<div class="bet_amount">
    <button class="five" value="5">5</button>
    <button class="ten" value="10">10</button>
    <button class="fifty" value="50">50</button>
    <button class="hundred" value="100">100</button>
</div>

Answer 2

您可以使用 jquery 做到这一点：

var values = []
$(document).on('click', 'button', function() {
  values.push(this.value)
  console.log(values)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div class="bet_amount">
  <button class="five" value="5">5</button>
  <button class="ten" value="10">10</button>
  <button class="fifty" value="50">50</button>
  <button class="hundred" value="100">100</button>
</div>

Answer 3

如何设置全局点击监听器来获取值？

是的，您必须为一个对象中的所有按钮设置一个全局点击监听器 - <div class="bet_amount">。如果您为每个按钮设置一个单击侦听器，则对浏览器性能不利。

使用e.target.nodeName == 'BUTTON'，您可以识别"bet_amount" 类元素内的按钮点击。

var result = [];

function placeBet()
{
    var betAmount = document.querySelector('.bet_amount');
    betAmount.onclick = function(e)
    {
        if(e.target.nodeName == 'BUTTON')
        {
            result.push(+e.target.value); //"+" is converting to integer
            console.log(result.join(','))
        }
    };
}
placeBet();

<div class="bet_amount">
    <button class="five" value="5">5</button>
    <button class="ten" value="10">10</button>
    <button class="fifty" value="50">50</button>
    <button class="hundred" value="100">100</button>
</div>