title: how could the callback function of addEventListener() works even if we didn't pass the event object into the function
body: <pre><code>const eventHandler = function (eventObject) {
      console.log('You clicked on the page')
      console.log(eventObject)
  }
  
  document.addEventListener('click', eventHandler)
  </code></pre>
  <p>So the codes above, as you can see we are listening to the click event on the page, with a &quot;seperated&quot; callback function, or an event handler function named <code>eventHandler</code>. And you can see this <code>eventHandler</code> function it expects an <code>eventObject</code> parameter which is the event object itself.</p>
  <p>You can see, when i pass the function <code>eventHandler</code> 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 <code>You clicked on the page</code> message, and the event object.</p>
  <p>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!</p>
  <p>Sorry you may want to run this codes on yourself, I will update the demo later, thank you so much!</p>