how could the callback function of addEventListener() works even if we didn't pass the event object into the function

Question

const eventHandler = function (eventObject) {
    console.log('You clicked on the page')
    console.log(eventObject)
}

document.addEventListener('click', eventHandler)

So the codes above, as you can see we are listening to the click event on the page, with a "seperated" callback function, or an event handler function named eventHandler. And you can see this eventHandler function it expects an eventObject parameter which is the event object itself.

You can see, when i pass the function eventHandler into the addEventListener() method, i didn't passing any argument, right? So i didn't pass the eventObject into it. But, when i run the codes, the codes still running without error, so when i clicked on the page, i get a You clicked on the page message, and the event object.

Why is that? How could that function can log the event object into the console, when it requires us to pass the event object into it as an argument and we didn't do that? And that is my question. I got into this situation when playing around with DOM event, and it really make me confused. So hopefully someone can help me understand, what's going on here! Thank you very much!

Sorry you may want to run this codes on yourself, I will update the demo later, thank you so much!

Does this answer your question? [What exactly is the parameter e (event) and why pass it to JavaScript functions?](https://stackoverflow.com/questions/35936365/what-exactly-is-the-parameter-e-event-and-why-pass-it-to-javascript-functions) — Cypherjac, Sep 06 '21 at 14:46
Ins your suggested question they said: "_The handler function, by default, when executed is passed the event object (that was created when the event/action you are interested in happened) as an argument_", so that means, by default, the event object is automaticlly pass into the handler function and we dont need to pass, if we calling handler function likes im doing above, right? — Gia Phu Tang, Sep 06 '21 at 14:52
Yes, check edited answer below, the function does not need the event parameter because it has already been passed to it when it was defined — Cypherjac, Sep 06 '21 at 15:01

Cypherjac · Answer 1 · 2021-09-06T14:58:17.400

The reason you don't need to pass an event as a parameter to the function eventHandler that you are calling in the document onclick event listener, is because it already has an event that has been registered to it in the function

const eventHandler = function (eventObject) {
  console.log('You clicked on the page')
  console.log(eventObject)
}

// document.addEventListener('click', eventHandler)
// This function above is the exact same as the one here below
// That's why it works, because the event object has already been passed to the function

document.addEventListener('click', function(eventObject){
  console.log('You clicked on the page')
  console.log(eventObject)
})

<h2>Click anywhere to run the function</h2>

how could the callback function of addEventListener() works even if we didn't pass the event object into the function

1 Answers1