Event Handler - Piano Keys Project

Hi.

I’ve already finished Piano Kyes Project, and I’m watching the walkthrough video of this project.

At the minute 7:50, he said we couldn’t simply just set equal keyPlay since it would redefine note.onmousedown = .

Basically he said that it wasn’t ok to write this: note.onmousedown=keyPlay;, instead he wrote: (watch below the last comment)

// The keys and notes variables store the piano keys
const keys = ['c-key', 'd-key', 'e-key', 'f-key', 'g-key', 'a-key', 'b-key', 'high-c-key', 'c-sharp-key', 'd-sharp-key', 'f-sharp-key', 'g-sharp-key', 'a-sharp-key'];
const notes = [];
keys.forEach(function(key){
  notes.push(document.getElementById(key));
})

// Write named functions that change the color of the keys below
const keyPlay = function (event) {
    event.target.style.backgroundColor='#6df0c2';
}
const keyReturn = function (event) {
    event.target.style.backgroundColor='';
}
// Write a named function with event handler properties
let eventAssignment = function(note) {
note.onmousedown = function() {
   keyPlaay(event)
 }
}

But, I did what he said not to do, and it worked. I wrote:

// The keys and notes variables store the piano keys
const keys = ['c-key', 'd-key', 'e-key', 'f-key', 'g-key', 'a-key', 'b-key', 'high-c-key', 'c-sharp-key', 'd-sharp-key', 'f-sharp-key', 'g-sharp-key', 'a-sharp-key'];
const notes = [];
keys.forEach(function(key){
  notes.push(document.getElementById(key));
})

// Write named functions that change the color of the keys below
const keyPlay=e=>{
    e.target.style.backgroundColor='brown';
}
const keyReturn=e=>{
    e.target.style.backgroundColor='';
}
// Write a named function with event handler properties
const playNote=note=>{
    note.onmousedown=keyPlay;
    note.onmouseup=keyReturn;
}

My question is if there is something wrong or a situation I can’t see and VScode is smart enough to detect it. Or there is no mistake.

I have a question…

Did it actually work, or are you assuming that it’s fine because you’re getting no errors from Visual Studio Code?

Yes, it did. There was no problem, All the “lines” worked when I cliked on them.

This is the link for the repository on GitHub

I’m also keen to understand this syntax. I was surprised to see it written this way. I also don’t fully understand what it means

let eventAssignment = function(note) {
note.onmousedown = function() {
   keyPlay(event)
 }
}

I don’t understand how this works since ‘event’ isn’t defined, is this something that’s embedded into JS and the editor just understands?

Equally so, running the code as follows, without providing a param is also confusing?

note.onmousedown = keyPlay;

It would be great to get a better understanding of what’s going on here.