这两个事件监听回调的添加方式有什么区别呢？函数VS箭头函数调用函数

Question

使用以下每种方法需要注意的结果是什么？
如果我需要在调用一个函数的同时传递一个不是触发事件本身的参数，箭头函数方法是否更好？

document.querySelector('#element').addEventListener('click', () => myFunction1(param1));
document.querySelector('#element').addEventListener('click', myFunction2);

Answer 1

内联调用函数，就像

() => myFunction1(param1)

将

在没有元素的 this 的情况下调用 myFunction1（如果您在顶层，函数内的 this 将是 window 对象或undefined)
用param1的参数调用myFunction而不是点击事件的参数

第二种方法有时用作shorthand，当你想在监听器中引用监听器附加到的元素时，例如：

function myFunction2() {
  this.remove();
}
document.querySelector('#element').addEventListener('click', myFunction2);

<button id="element">click</button>

要在第一种方法中做同样的事情，您要么必须先将 #element 保存在一个变量中，要么使用 querySelector 再次将其 select 保存。

Is the arrow-function approach better if I needed to call a function whilst passing it an argument which isn't the triggering event itself?

是的，这是一种很常见的做法。

另一种方法是创建一个高阶函数，像这样：

const makeMyFunction1 = (param) => () => console.log(param);
document.querySelector('#element').addEventListener('click', makeMyFunction1('foo'));

<button id="element">click</button>

另外请记住，如果您希望以后能够删除侦听器，您必须使用命名函数：

function myFunction2() {
  console.log('hi');
  this.removeEventListener('click', myFunction2);
}
document.querySelector('#element').addEventListener('click', myFunction2);

<button id="element">click</button>

这两个事件监听回调的添加方式有什么区别呢？函数VS箭头函数调用函数

What's the difference in the way these two event listener callbacks are added? Function VS arrow function calling the function

javascript

addeventlistener

arrow-functions