JavaScript addEventListener с событием и привязкой переменной - PullRequest
Новая
       20

JavaScript addEventListener с событием и привязкой переменной

0 голосов
/ 07 февраля 2019

Я занят, пытаясь динамически назначать функции определенным кнопкам, и столкнулся со странной проблемой, с которой я абсолютно озадачен.

У меня есть следующий простой 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);
}

По отдельности они оба работают просто отлично, но я изо всех сил пытаюсь передать аргумент события в функции связывания

Я пытаюсь объединить два, чтобы я мог вызвать одну функцию, которая может принимать и событие, и аргумент

ОБНОВЛЕНИЕ

Это кажется возможным исправлением, хотя я не понимаю, как быть честным

С той же петлей 

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

1 Ответ

0 голосов
/ 07 февраля 2019

Вам нужно создать замыкание, чтобы обратный вызов четного обработчика содержал контекст.Вы можете сделать это, используя forEach вот так 

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

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