1

I have been using events in javascript for 4 years, but I am only now starting to learn about the event object in detail.

I understand that the event object has 10 properties:

  • bubbles
  • cancelable
  • currentTarget
  • defaultPrevented
  • eventPhase
  • isTrusted
  • target
  • timeStamp
  • type
  • view

and each of these properties can be accessed within an event-fired function using:

  • e.bubbles
  • e.cancelable
  • e.currentTarget
  • etc.

But my question is, when an event listener fires a function:

function myFunction(e) {

   [... CODE HERE...]

}

How does the browser know that the e refers to the event object?

I understand that any name can represent the event object - e, or event or goldfish or anything... but how does the browser know which of the function parameters is the event object?

Rounin
  • 27,134
  • 9
  • 83
  • 108
  • because it is the first..... how the spec is. https://dom.spec.whatwg.org/#callbackdef-eventlistener – epascarello Jan 18 '18 at 13:14
  • I've always assumed the same as @epascarello it's just the first parameter passed to the function. – George Jan 18 '18 at 13:16
  • Yeah, the event *handler* gets invoked by the event *listener* which always passes the event object as the first argument – Lennholm Jan 18 '18 at 13:25
  • Hmm. Okay. But what if the function has a single parameter and it isn't the event object? And what if the function has three parameters and none of them are the event object? In each case is javascript performing a simple check to see if the event object is referenced by the first parameter or not? – Rounin Jan 18 '18 at 13:27
  • 2
    It's not up to the event handler to dictate what arguments it gets passed, it's the event listener that invokes the handler that decides which arguments it invokes it with. An event handler has to be written with the understanding that the first argument is always going to be the event object. – Lennholm Jan 18 '18 at 13:28
  • Is it simply that the event object is an implicit "hidden" parameter in the event listener invocation which comes before all other explicitly stated parameters? Is that the best way to understand it? – Rounin Jan 18 '18 at 13:34
  • No, it's not a hidden parameter, see my answer. – Lennholm Jan 18 '18 at 13:40

1 Answers1

2

An event handler is basically a callback function. That means it's the invoker (in this case, the event listener) that dictates what arguments the callback function gets invoked with and it's the callback function that must adhere to this specification.

By it's specification, an event listener invokes the handler with the event object as the first argument. Always! This means event handler functions have to be written with the understanding that the first argument is always going to be the event object. What the event handler names this argument is entirely up to the event handler since that name is just the local reference to the object anyway.

What an event handler expects is actually completely irrelevant to the listener that invokes it, it doesn't know and doesn't care. In other words, even if the handler expects more than one argument, those other arguments are going to be undefined when the handler gets invoked unless the listener also passes more arguments than just the event object.

Lennholm
  • 7,205
  • 1
  • 21
  • 30