BUILDING INTERACTIVE JAVASCRIPT WEBSITES / Piano Keys

The video walkthrough (7min58seconds) shows and explains this code:

const keyPlay = function(event) {event.target.style.backgroundColor = ‘#df7373’}

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

However, I couldn’t understand his explanation of why I had to write “function(){keyPlay(event)” instead of simply writing “keyPlay”. I tried the below and worked fine:

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

My husband did some research and told me the first option (shown on the video) is legacy code and shouldn’t be used any more - is that correct?

https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/dom-javascript-events/projects/piano-keys

The above is a global event listener being attached to a DOM element node. The name is not important except to direct the action toward the correct (currently bound) element node. Once the attachment is made, the name has no more purpose, hence, within the loop will be given a new assignment, the next element in the notes collection.

Global event listeners take a callback. Whether the callback is a literal function or a reference to a global function is of no real concern. The simplest, though, is to use free standing global functions that may be re-usable by the entire program.

The latter example uses the above reasoning. All we need to give the listener is a reference to the function we wish it to use to handle the event.

All global events are objects with attributes that we can poll in the handler. One such global object is event. Our handler function (the callback) can poll the target attribute which exposes the DOM element node with which the user has interacted.

Bottom line, the event listener needs only a reference to the function it is to invoke when triggered. All relavent data is available to the handler through the event object.


It wouldn’t be fair to not comment on the first example, however moot. If we were to use a literal, we wouldn’t use it to call the callback. It would be the callback.

note.onmousedown = function () {
  event.target.style.backgroundColor = 'green';
}

Even if we use arrow function syntax, we could not hide how very many listeners are taxing resources.

note.onmousedown = () => {
  event.target.style.backgroundColor = 'green';
}

There are thirteen notes in the collection. The collection has an identity… notes which is an array populated with id references. Recall that id is a global attribute. At any length, it is this collection of nodes that are being assigned event listeners. Not only did we have to build this collection, but now we have to bind listeners, as well. That’s a lot of work.

Consider a parent element with an id, notes. Since we already know that the event object has a target attribute, we could simply bind an event listener to this parent and let bubbling and delegation do the work.

It is not only possible to determine the id of the mousedown target, but all other attributes of that specific DOM element. Do they even need ids, though? Since the parent element is bound to the listener we can capture them in the event object.