my code works with and without function parameters, and I don't understand why:

Question

// This is a practice on Codecademy, I was following the steps and encounter this situation.

//this is the code in the tutorial

// 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.Not tutorial

// 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);

Both codes work, but the one below did not have to take event in function parameter, so I want to know why. Was it necessary for some other reason?

Answer 1

This is one of those "works by coincidence" situations, but this is definitely not how the event should be handled.

From MDN:

The read-only Window property event returns the Event which is currently being handled by the site's code. Outside the context of an event handler, the value is always undefined.

So, when calling event from outside of a closure, you're actually referring to window.event. As stated above, this returns the currently occurring event in the context of an event handler.

Passing event as a function parameter and then referencing it in that function will refer to the parameter itself, not the event property on the global scope (which is window). It's sort of like a static property for the context of the event handler.

This is more easily demonstrated by changing the name of your parameter:

// 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)

You should be passing events as parameters, though, because according to MDN (again):

You should avoid using this property in new code, and should instead use the Event passed into the event handler function. This property is not universally supported and even when supported introduces potential fragility to your code.