JavaScript addEventListener 与事件和绑定(bind)变量

Question

我正忙于尝试动态地将功能分配给某些按钮，但遇到了一个奇怪的问题，我完全被难住了。

我有以下简单的 HTML 用于演示目的

<div id="butts">
   <button>BUTT 01</button>
   <button>BUTT 02</button>
</div>

现在我使用 JavaScript 通过以下循环(包括事件)为这些按钮分配功能

var butts = $("#butts").find("button");
for(var cnt = 0; cnt < butts.length; cnt ++) {

   // get button description just for testing
   var buttonDesc = $(butts[cnt]).text();

   // EVENT
   butts[cnt].addEventListener (
      "click", function(event) {
         funcEvent(event)
      }
   );

}

调用一个非常简单的测试函数来验证它是否正常工作

function funcEvent(event) {
   console.log("funcEvent");
   console.log(event);
}

这工作正常，但我还需要将一个变量传递给函数，我通常会这样做

var butts = $("#butts").find("button");
for(var cnt = 0; cnt < butts.length; cnt ++) {

   // get button description just for testing
   var buttonDesc = $(butts[cnt]).text();

   // BIND
   butts[cnt].addEventListener (
      "click", funcBind.bind(this, buttonDesc)
   );

}

另一个非常简单的测试函数

function funcBind(buttonDesc) {
   console.log("funcBind");
   console.log(buttonDesc);
}

它们各自工作得很好，但我很难在绑定(bind)函数中传递事件参数

我试图将两者结合起来，以便我可以调用一个可以同时接收事件和参数的函数

<小时/>

更新

这似乎是一个可能的解决方案，尽管我不明白如何诚实

使用相同的循环

var butts = $("#butts").find("button");
for(var cnt = 0; cnt < butts.length; cnt ++) {

   // get button description just for testing
   // using var did not work (always last element of array)
   // var buttonDesc = $(butts[cnt]).text();
   let buttonDesc = $(butts[cnt]).text();

   // EVENT
   butts[cnt].addEventListener (
      "click", function(event) {
         funcEventBind(event, buttonDesc);
      }
   );

}

调用一个非常简单的测试函数来验证它是否正常工作

function funcBindEvent(event, buttonDesc) {
   console.log("funcEvent");
   console.log(event);
   console.log(buttonDesc);
}

Answer 1

您需要创建一个闭包，以便事件处理程序回调包含上下文。您可以通过像这样使用 forEach 来做到这一点

butts.forEach(function(bt) {
  var buttonDesc = $(bt).text();

   // BIND
   bt.addEventListener (
      "click", function(event){
          funcBind(event, buttonDesc)
       }
   );
})