Calling event handler functions without opening and closing brackets

Hey all,

I am currently going through the DOM Events with Javascript lesson and I am a bit confused as to why the event handler functions can be called without the opening and closing brackets.

The specific section in question is the example that is given in part 3/10:

function eventHandlerFunction() {
  // this block of code will run when click event happens
}
 
eventTarget.addEventListener('click', eventHandlerFunction);

There was a similar question in the JavaScript and the DOM lesson (section 7/9), where the answer is:

let element = document.querySelector("button");

function turnButtonRed (){
  element.style.backgroundColor = 'red'
  element.style.color = 'white'
  element.innerHTML = 'Red Button'
}

element.onclick = turnButtonRed

Why is it not possible to call the eventHandlerFunction and turnButtonRed as:

  • eventHandlerFunction()
  • turnButtonRed()

Thank you.

We are registering the event listener with only a reference to the handler function, without invoking it, else we would be passing a value, and not a reference.

The handler is only invoked when it is triggered by the ‘click’ event.