如何停止立即运行但仍然传递索引的点击功能？

Question

当我通过点击事件从另一个函数调用函数时，一切正常：

const func2 = () => {
  console.log('this ran')
}
const func1 = (item, i) => {
  item.addEventListener('click', func2);
}

然而，当我传递索引时，第二个函数（func2）立即运行。

const func2 = (i) => {
  console.log(i + ' was clicked')
}
const func1 = (item, i) => {
  item.addEventListener('click', func2(i));
}

Answer 1

使用Function.prototype.bind()：

const func2 = (i, event) => {
  console.log(i + ' was clicked');
};

const func1 = (item, i) => {
  item.addEventListener('click', func2.bind(null, i));
};

由于箭头功能没有自己的上下文（this），因此传递null可确保您不希望func2()有权访问任何特定的上下文。 event将被推送＆＃34;到下一个论点，如func2 = (i, event) => { ... }所示。

或者，使用包装函数：

const func2 = (i, event) => {
  console.log(i + ' was clicked');
};

const func1 = (item, i) => {
  item.addEventListener('click', (event) => func2(i, event));
};

假设您了解范围界定的工作方式，这只会创建一个匿名回调函数，该函数可以在其范围内访问i和event，并按照您喜欢的顺序传递它们func2()