Как сделать так, чтобы eventListener передал элемент?

В JavaScript существуют несколько способов передать элемент в обработчик события (eventListener). Давайте рассмотрим несколько примеров.

1. Использование замыкания:

const myButton = document.querySelector("#myButton");

myButton.addEventListener("click", function() {
  // Используем замыкание, чтобы передать элемент
  handleEvent(this);
});

function handleEvent(element) {
  console.log(element);
  // Делаем что-то с элементом
}

В этом примере мы используем замыкание, передавая ключевое слово this в функцию handleEvent. Таким образом, this будет ссылаться на элемент, который вызвал событие (в данном случае кнопку).

2. Использование стрелочной функции:

const myButton = document.querySelector("#myButton");

myButton.addEventListener("click", () => {
  // Используем стрелочную функцию, чтобы передать элемент
  handleEvent(myButton);
});

function handleEvent(element) {
  console.log(element);
  // Делаем что-то с элементом
}

В этом примере мы передаем сам элемент myButton в функцию handleEvent. Стрелочная функция сохраняет контекст исполнения, поэтому переменная myButton будет доступна внутри обработчика события.

3. Использование метода bind():

const myButton = document.querySelector("#myButton");

// Используем метод bind() для передачи элемента в обработчик
myButton.addEventListener("click", handleEvent.bind(null, myButton));

function handleEvent(element) {
  console.log(element);
  // Делаем что-то с элементом
}

В этом примере мы используем метод bind() для передачи элемента myButton в функцию handleEvent. Первый аргумент метода bind() - это значение this, которое мы устанавливаем как null, так как в данном случае контекст исполнения не важен.

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