Javascript - добавление функции с параметром в addEventListener приводит к срабатыванию функции

Question

Я пытаюсь передать индекс функции forEach() в аргумент функции внутри addEventListener следующим образом:

dispensaryLocations.forEach((location, i) => {
  location.addEventListener('click', clickLocationToOpenMarker(i));
});

Вот функция clickLocationToOpenMarker():

  const clickLocationToOpenMarker = id => {
    infoWindowContents.map(infowindow => {
      infowindow.close();
    });
    google.maps.event.trigger(markers[id], 'click');
  };

Для контекста: markers - это массив маркеров Карт Google, при нажатии на которые открывается информационное окно с информацией о местоположении. infoWindowContents - это массив, содержащий все соответствующие информационные окна для каждого маркера. Однако здесь меня не интересует API Карт Google, это скорее проблема передачи аргумента функции внутри addEventListener без ее запуска.

Моя проблема в том, что когда я передаю функцию в addEventListener следующим образом: element.addEventListener('click' clickLocationToOpenMarker) функция назначается каждому элементу, как и ожидалось, и не сразу вызывается и запускается.

Предостережение в том, что мне нужно иметь возможность передать переменную i в качестве аргумента функции следующим образом: element.addEventListener('click', clickLocationToOpenMarker(i)), чтобы функция знала, какой Google Maps Marker открыть. Однако, как только я добавляю аргумент к параметру функции, в отличие от приведенного выше примера, функция вызывается и запускается сразу на каждой итерации цикла forEach().

Почему addEventListener запускает функцию немедленно при передаче аргумента, но когда аргумент не передан функции, она просто назначает ее?

Answer 1

Вы вызываете clickLocationToOpenMarker. Вам нужно обернуть его в функцию, чтобы он не запустился немедленно:

dispensaryLocations.forEach((location, i) => {
  location.addEventListener('click', () => clickLocationToOpenMarker(i));
});

Answer 2

Выражение clickLocationToOpenMarker(i) является вызовом функции.Чтобы привязать функцию к событию click, вы можете заключить ее в другую анонимную функцию (как поясняет тип ответа в своем ответе):

location.addEventListener('click', function() {
    clickLocationToOpenMarker(i);
});

Или вы можете использовать Function.prototype.bind для привязкизначение параметра в функции (поэтому вам не нужно создавать анонимную функцию).

location.addEventListener('click', clickLocationToOpenMarker.bind(null, i));