带有事件和绑定变量的JavaScript addEventListener

我正忙着为某些按钮动态分配功能，我遇到了一个奇怪的问题，我完全被难住了

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

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

这很好，但我还需要向函数传递一个变量，我通常会这样做

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)
   );

}

分开来看，它们都工作得很好，但我很难在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);
      }
   );

}

---

您需要创建一个闭包，以便偶数处理程序回调包含上下文。您可以这样使用

forEach

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

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

---

我确实尝试过，但是buttonDesc变量总是循环中的最后一个描述，所以我认为它没有绑定correctly@Trent您是否正在使用我在回答中描述的

forEach

函数（而不是for循环）？不，它告诉我butts.forEach不是function@Trent您已经添加了

var butts=$（“#butts”）。查找（“按钮”）forEach

前面的行，对吗？@Trent

让

工作，因为它与

var

不同，是块作用域。我没有建议使用

let

解决方案，因为通常认为在循环中创建函数不是一种好的做法。

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

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);
}

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

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