事件处理语法

Question

我在Eloquent JavaScript一书中读到了关于处理事件的内容，他们有这个例子来解释stopPropagation：

​

let para = document.querySelector('p');
let button = document.querySelector('button');

para.addEventListener('mousedown', () => {
  console.log("Handler for paragraph.");
})
button.addEventListener('mousedown', event => {
  console.log("Handler for button.");
  if (event.button == 2) event.stopPropagation();
})

<p>A paragraph with a <button>button</button>.</p>

​

我不明白为什么，当他们将事件侦听器添加到para变量时，他们用() =>编写它

para.addEventListener('mousedown', () => {})

当他们将其添加到按钮变量中时，他们将其编写为event =>

button.addEventListener('mousedown', event => {})

我尝试将()按钮添加到=>变量中，代码的工作方式与事件=>相同。这只是为了让我们能记住这两种用法吗？或者，有没有我遗漏的合理原因？

谢谢!

Answer 1

我不明白为什么，当他们将事件侦听器添加到参数变量中时，他们用() =>编写它

事件处理程序传递一个事件对象作为它们的第一个参数。因为函数没有使用它，所以它没有在参数列表中捕获它。

当他们把它添加到

变量中时，他们把它写成event =>

该函数确实使用了事件对象，因此在参数列表中捕获了该对象。

已尝试将() =>添加到按钮变量中，代码的工作方式与事件=>相同。这仅仅是为了让我们能够记住这两种用法吗?还是我遗漏了一个合理的原因？

现在您使用的是MDN所说的global event object：

应避免在新代码中使用此属性，而应使用传递到事件处理函数中的事件。此属性并不受普遍支持，即使受支持也会给您的代码带来潜在的脆弱性。