Piano Keys

In the Pinao Keys Full Stack Engineer Course Project - I am confused about what (event) is in the first function, and how in inevitably gets called later inside the eventAssignment function?

let keyPlay = (event) => {
  event.target.style.backgroundColor = 'red'
}

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

const eventAssignment = (note) => {
  note.onmousedown = function () {
    keyPlay(event);
  }
  note.onmouseup = function () {
    keyReturn(event);
  }
}```

For a function used in an event listener, the first argument/parameter is always the event (an Event object), which is called event in your code (where event is used as a parameter for your functions).

if its used for .onmousedown, then that function will be called when the mouse button is pressed at that element,
and for .onmouseup, then that function will be called when the mouse button is released at that element.

Also, in your eventAssignment function,
you created an anonymous function that is not needed (and does not have an event parameter)

  note.onmousedown = function () {
    keyPlay(event);
  }

should be

  note.onmousedown = keyPlay;

or you could do

  note.addEventListener("onmousedown", keyPlay);

and similarly for .onmouseup

1 Like