Javascript 向页面上的多个按钮添加不同的EventListener

一些背景：我一直在做一个黑暗灵魂II统计计算器。我有一个带有按钮的表格，可以让你在任何主要统计数据中添加或减去一个值。这将更新页面上的统计信息，最终会告诉你需要多少灵魂（经验点）才能达到灵魂等级

无论如何，我想使用纯Javascript向每个按钮添加EventListener以实现这一目标。问题是，我已经用几个不同的电话添加了它们，我只是好奇是否有更有效的方法来实现这一点。下面的代码示例将向您展示我的详细解决方案，我非常确定为了简洁起见可以对其进行精简。如果你能用纯Javascript回答我的问题，这将被认为比使用jQuery更高，但如果你能提出jQuery解决方案，我仍然会非常感激。我认为这个问题很可能有一个优雅的解决方案，但我却不知所措

下面是一个带有三个按钮的代码示例

HTML代码段（显然在body标记中）：

现在，上面的代码可以工作了，但问题是有九个统计数据（我只显示了三个），而且变得非常冗长。这样做正确吗？我应该担心吗

这是我的一个想法，但最终没有奏效…（与上面的HTML相同）

Javascript代码段：

window.onload = function() 
{
    //Global event listeners - Buttons
    //VIGOR
    document.getElementById("addVIG").addEventListener("click", function(){ addOne("increasedVIG"); }, false);
    document.getElementById("minusVIG").addEventListener("click", function(){ minusOne("increasedVIG"); }, false);

    //ENDURANCE
    document.getElementById("addEND").addEventListener("click", function() { addOne("increasedEND"); }, false);
    document.getElementById("minusEND").addEventListener("click", function() { minusOne("increasedEND"); }, false);

    //VITALITY
    document.getElementById("addVIT").addEventListener("click", function() { addOne("increasedVIT"); }, false);
    document.getElementById("minusVIT").addEventListener("click", function() { minusOne("increasedVIT"); }, false);

}

//The functions calls and objects within these two functions are for updating statistical values. 
function addOne(id)
{
        console.log(id);
    id = document.getElementById(id);
    id.innerText = parseInt(id.innerText) + 1;
    player.SoulLevel++;
    updateAll();
}

function minusOne(id)
{
        console.log(id);
    id = document.getElementById(id);
    if (parseInt(id.innerText) != 0)
    {
        id.innerText = parseInt(id.innerText) - 1;
        player.SoulLevel--;
        updateAll();
    }
}

//suffix has global scope
var suffix = ["VIG", "END", "VIT"];

window.onload = function()
{
    for (var i = 0; i < suffix.length; i++)
    {
        document.getElementById("add" + suffix[i]).addEventListener("click", function(){    addOne("increased" + suffix[i]);    }, false);
        document.getElementById("minus" + suffix[i]).addEventListener("click", function(){ minusOne("increased" + suffix[i]); }, false);
    }
}

//后缀具有全局作用域
变量后缀=[“VIG”、“END”、“VIT”]；
window.onload=函数（）
{
对于（变量i=0；i

---

当您单击加号或减号按钮时，

console.log（id）

返回

increasedundefined

，因此我猜您无法以这种方式创建事件侦听器。有什么想法吗？

除了不调用命名事件处理程序函数和当前事件处理程序中索引变量的作用域问题之外，代码没有任何问题。

以下是一个您可能会发现有用的选项：

注意新的

data-*

属性的使用：

<div id="statsHome">
    <tr id="rowVigor">
        <td>Vigor</td>
        <td id="baseVIG">0</td>
        <td class="increased" id="increasedVIG">0</td>
        <td id="currentVIG">0</td>
        <td><input type="button" value="-" class="buttonSubtract" data-type="increasedVIG"/></td>
        <td><input type="button" value="+" class="buttonAdd" data-type="increasedVIG"/></td>
    </tr>
</div>

活力
0
0
0

在本例中，我将循环并添加到按钮，而不是使用委派。不过，这真的是一种折腾

function addHandler(button, mode) {
  if (mode === "add") {
    button.addEventListener("click", function() { 
      var stat = this.getAttribute("data-type");
      addOne(stat);
    }, false);
  } else { 
    button.addEventListener("click", function() {
      var stat = this.getAttribute("data-type");
      minusOne(stat);
   }, false);
  }

}

var statsHome = docuemt.getElementById("statsHome");
var buttons = statsHome.getElementsByTagName("input");
for (var i = 0; i < buttons.length; i++) {
  var button = buttons[i];
  if (button.className === "buttonSubtract") {
    addHandler(button, "subtract");
  }
  if (button.className === "buttonAdd") {
    addHandler(button, "add");
  }
}

函数addHandler（按钮，模式）{
如果（模式=“添加”）{
addEventListener（“单击”，函数（）{
var stat=this.getAttribute（“数据类型”）；
addOne（stat）；
}，假）；
}否则{
addEventListener（“单击”，函数（）{
var stat=this.getAttribute（“数据类型”）；
联安稳定团（统计）；
}，假）；
}
}
var stathome=docuemt.getElementById（“stathome”）；
var buttons=stathome.getElementsByTagName（“输入”）；
对于（变量i=0；i

函数调用日志显示事件已连接这一事实听起来像是您应该使用闭包：它未定义的原因是因为变量i在事件处理程序中未定义。你需要申报我globally@BrettWeber他应该使用闭包，而不是全局variable@A.Wolff-我正要开始，这是我想要的更多答案，感谢您介绍data-*attribute和getAttribute方法，并在实际情况中使用它们。我将利用我在这方面的知识和闭包的使用作为一种学习练习，试图模仿这两种解决方案。这将缩短您的学习——应该与前面的链接：。这是我唯一一次使用setAttribute而不是使用元素属性。

function addHandler(button, mode) {
  if (mode === "add") {
    button.addEventListener("click", function() { 
      var stat = this.getAttribute("data-type");
      addOne(stat);
    }, false);
  } else { 
    button.addEventListener("click", function() {
      var stat = this.getAttribute("data-type");
      minusOne(stat);
   }, false);
  }

}

var statsHome = docuemt.getElementById("statsHome");
var buttons = statsHome.getElementsByTagName("input");
for (var i = 0; i < buttons.length; i++) {
  var button = buttons[i];
  if (button.className === "buttonSubtract") {
    addHandler(button, "subtract");
  }
  if (button.className === "buttonAdd") {
    addHandler(button, "add");
  }
}