Add Event Listener with ForEach (Piano Key Project)

This question comes while I try to solve the initial part of this project [Piano Key]
The goal here is to make the DOM element to change background color when it is pressed (mousedown) and return back to the original color when it is released (mouseup). Below code works as expected.

// notes array includes multiple DOM elements
function keyPlay(event){
  event.target.style.backgroundColor = 'cyan';
}
function keyReturn(event){
  event.target.style.backgroundColor = '';
}
function play(note) {
  note.addEventListener('mousedown', keyPlay);
  note.addEventListener('mouseup', keyReturn);
}
notes.forEach(play);

However, I also tried to write in a different way, which I thought it would make sense, but with the code below, the DOM element color changes when it is pressed but does not return to original color when it is released.

// notes array includes multiple DOM elements
function keyPlay(event){
  event.target.style.backgroundColor = 'cyan';
}
function keyReturn(event){
  event.target.style.backgroundColor = '';
}
notes.forEach(addEventListener('mousedown', keyPlay));
notes.forEach(addEventListener('mouseup', keyReturn));

The way I understood is that I can register multiple event handler to a DOM element. In the second case, I thought I have registered two event handlers to each DOM element present in the notes array, but it seems like only one event handler (keyPlay case) is registered.

Could anyone help me better understand why only the first case works and not the second case?

The second case is treating ‘addEventListener’ as a function. It is actually a method of HTMLElement class (aka, every node in the DOM).

A callback has to be a function.

array.forEach(function (element) {
  // register listener on element
})