Блог

Я пытаюсь обобщить одну функцию для обработки различных событий в JavaScript. Это означает, что в зависимости от прослушивателя событий, который был вызван, моя функция должна вести себя по-другому. Однако я могу передать ссылку только на свою функцию, и именно здесь возникает моя проблема.

Для того, чтобы моя функция работала должным образом, мне нужно знать, какой обработчик событий вызвал ее. Но если я могу передавать только по ссылке, я не могу передать параметр, который сообщает мне, кем был вызывающий функцию. Итак, есть ли способ передать ссылку на функции, но также разрешить ей принимать параметр?

Вот некоторый общий код, который, надеюсь, иллюстрирует мой вопрос.

 btn1.AddEventListener("Click", myFunction);
btn2.AddEventListener("Click", myFunction);

function myFunction(caller){
   if(caller == someObject)
   {
    //do something
   }
   else
   {
    //do something
   }
}
  

Внутри функции вы можете либо изучить this , который будет ссылаться на элемент, к которому был добавлен прослушиватель, либо на первый параметр ( event ) currentTarget , который будет ссылаться на то же самое:

 function myFunction(event) {
  if (event.currentTarget === btn1) {
    // btn1 was clicked
  } else {
    // btn2 was clicked
  }
}
  

Закрытие полезно для такого рода обработчиков событий. Чтобы создать замыкание, завершите вызов функции другой анонимной функцией, такой как:

 btn1.AddEventListener("Click", () => myFunction(btn1));
btn2.AddEventListener("Click", () => myFunction(btn2));
  

Кроме того, вы можете передавать дополнительные аргументы столько, сколько захотите, например:

 btn1.AddEventListener("Click", () => myFunction(btn1, another_param));

function myFunction(btn, param){
    // ... do something with param.
}
  

В традиционной нотации это эквивалентно следующему:

 btn1.AddEventListener("Click", function () {
                         return myFunction(btn1);
                      });