Question

我正在阅读Eloquent JavaScript书中的Handling Events，他们有这个示例来解释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', () => {})

当他们将其添加到button变量时，他们将其写为event =>

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

我尝试将（）=>添加到button变量中，并且代码的工作方式与event =>相同。这仅仅是为了我们可以记住这两种用途吗？还是有一个我正想念的正当理由？

谢谢！

Answer 1

我不明白为什么，当他们将事件监听器添加到para变量时，他们使用（）=>

事件处理程序将事件对象作为第一个参数传递给它。由于该函数未使用它，因此没有将其捕获到参数列表中。

当他们将其添加到button变量时，他们将其写为event =>

该函数 did 使用Event对象，因此它被捕获在参数列表中。

尝试将（）=>添加到button变量中，并且代码的工作方式与event =>相同。这仅仅是为了我们可以记住这两种用途吗？还是有一个我正想念的正当理由？

现在您正在使用global event object，而MDN表示：

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

事件处理语法

1 个答案: