Question

//这是Codecademy上的一种做法，我正在按照步骤进行操作，遇到了这种情况。

//这是本教程中的代码

// Write a named function with event handler properties
const keyPlay = (event) =>{
  event.target.style.backgroundColor = 'green';
}
const keyReturn = (event) =>{
  event.target.style.backgroundColor = '';
}

// Write a named function with event handler properties

let assignEvents = (note) =>{
  note.onmousedown = () =>{
    keyPlay(event);
  }
  note.onmouseup = ()=>{
    keyReturn(event);
  }
}
// Write a loop that runs the array elements through the function
notes.forEach(assignEvents);

2。不是教程

// Write named functions that change the color of the keys below
const keyPlay = () =>{
  event.target.style.backgroundColor = 'green';
}
const keyReturn = () =>{
  event.target.style.backgroundColor = '';
}

// Write a named function with event handler properties

let assignEvents = (note) =>{
  note.onmousedown = () =>{
    keyPlay();
  }
  note.onmouseup = ()=>{
    keyReturn();
  }
}
// Write a loop that runs the enter code herearray elements through the functionenter code here
notes.forEach(assignEvents);

这两种代码都可以，但是下面的代码不必在函数参数中发生事件，因此我想知道为什么。是否有其他原因吗？

Answer 1

这是“巧合”的情况之一，但是绝对不是应该如何处理该事件。

来自MDN：

只读的Window属性事件返回当前由网站代码处理的事件。在事件处理程序的上下文之外，该值始终是未定义的。

因此，从闭包外部调用event时，实际上是在指window.event。如上所述，这将在事件处理程序的上下文中返回当前发生的事件。

将event作为函数参数传递，然后在该函数中对其进行引用将引用参数本身，而不是全局范围（即event）上的window属性。对于事件处理程序的上下文，它有点像静态属性。

通过更改参数名称可以更容易地说明这一点：

// Write a named function with event handler properties
const keyPlay = (playEvent) =>{
  playEvent.target.style.backgroundColor = 'green';
}
// works as expected! 


// Write a named function with event handler properties
const keyPlay = () =>{
  playEvent.target.style.backgroundColor = 'green';
}
// Exception: playEvent is undefined 
// (and there's no `window.playEvent` to accidentally reference instead)

不过，您应该将事件作为参数传递，因为根据MDN（再次）：

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

Answer 2

有两种可能性：

event是全局变量。因此，当您编写event.target.style.backgroundColor = 'green';时，该全局变量的属性会更改。
第二个代码块无法正确编译，第一个代码块仍在运行。我认为如果不传递事件，那么event.target.style.backgroundColor = 'green';会引用一个未知对象，因此将导致编译失败。

我的代码可以使用和不使用函数参数，并且我不明白为什么：

2 个答案: