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

对于contex：markers是一组Google Maps标记，单击它们后，打开一个显示有关位置信息的信息窗口。infoWindowContents是一个数组，其中包含每个标记的所有相应信息窗口。但是，我在这里与Google Maps API无关，更多的是试图在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));
});