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

Answer 2

表达式clickLocationToOpenMarker(i)是函数调用。要将函数绑定到click事件，可以将其包装在另一个匿名函数中（如sliptype在其答案中所述）：

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

或者，您可以用来Function.prototype.bind在函数中绑定参数值（这样就不必创建匿名函数）。

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