的JavaScript的addEventListener与事件并绑定变量

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

另外它们都工作得很好，但我在努力通过事件参数的绑定功能

我试图将两者结合起来，这样我可以打电话，可以同时接收事件和参数的单一功能

---

UPDATE

这似乎是一个可能的修复，虽然我不知道如何说实话

在相同的环

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