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标记的数组，单击时，打开一个InfowDindow，显示有关该位置的信息。infoWindowContents是一个阵列，可容纳每个标记的所有相应的InfowIndows。但是，我在这里不关心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)是函数调用。要将函数绑定到单击事件，您可以将其包装在另一个匿名函数中(如SlipType在答案中所述(：

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

或，您可以使用Function.prototype.bind来绑定函数中的参数值(因此您不必创建匿名函数(。

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