0

I was wondering if someone could elaborate on what the event object actually is. I have looked at many sources that all seem to say it is an object that holds information about the current event.

My question is, what is it really? Is it a single global object that holds every event type? Or is there an event object for each unique event that occurs. I have seen in code you can write things like event.type, event.cancelBubble etc. does this mean I can access the event anytime and modify it from anywhere in the code? I have seen in examples of functions accepting an event as an argument, but why should this be if it is a global variable accessible anywhere?

I know this seems a bit broad but most sources seem to not go too much into how the event object works on a lower level. So if someone could clear this confusion for me that would be appreciated.

Mysa Mysa
  • 19
  • 1
  • 5
  • as far as i know this object is created dynamically from the event then passed into the function to get all the information about current event like where it has came from what caused it to raise what type of event it is etc also there are features like cancelBubble preventDefault etc to stop certain internal actions if its not needed which will otherwise run fully – Amir Rahman Sep 25 '21 at 11:08
  • There is an [`Event` _interface_](//developer.mozilla.org/docs/Web/API/Event). There are several subclasses of it, e.g. [`MouseEvent`](//developer.mozilla.org/docs/Web/API/MouseEvent), [`UIEvent`](//developer.mozilla.org/docs/Web/API/UIEvent), [`AnimationEvent`](//developer.mozilla.org/docs/Web/API/AnimationEvent), `GamepadEvent`, etc. Each event object is an instance of one of those. Each instance has associated data, e.g. `x` and `y` for `MouseEvent`s, `elapsedTime` for `AnimationEvent`s, etc. They’re created and passed by `addEventListener` to the event handler function that you pass to it. – Sebastian Simon Sep 25 '21 at 12:29

2 Answers2

1

You are referring to the Window.event, which is no longer recommended for use. It is from a time when JavaScript had simpler goals and looser scope.

The read-only Window property event returns the Event which is currently being handled by the site's code. Outside the context of an event handler, the value is always undefined.

For new code, do not rely on the 'global' event being available and instead use the Event object passed to the event handler.

RWRkeSBZ
  • 723
  • 4
  • 11
  • Hi, thanks for the input. However, is there a reason why the global event is deprecated? It seems to be the same object as the event object passed to the handler? Do they point to the same object, and if so, why is it deprecated? Thanks – Mysa Mysa Sep 25 '21 at 12:21
  • @MysaMysa Simply because globals are a horrible practice – Bergi Sep 25 '21 at 12:50
  • @MysaMysa -- `Window.event` is global for the entire window. If multiple events occur in quick succession, `Window.event` will reference only the last one. And if you expect a rigid sequence of events, but there are unexpected events, your code could assert the wrong event. The other reason, as stated in the linked documentation, is that `Window.event` is not accurate with shadow trees. But if you're asking generally, deprecation happens when the feature is no longer fit for purpose, as is the case with `Window.event`. – RWRkeSBZ Sep 25 '21 at 13:06
0

event is something that signifies something has happened.

If you click,type,resize, something loads etc. all of these are events. When you have a listener on any of these events, you are telling that you want something to happen in reaction to this event. The listener function has an argument event. This event will have details about the event that triggered it.

All these events implement from the same Event interface. So that is what you might be confusing it with. A bunch of event types - MouseEvent, ClipboardEvent etc. implement this. And events like click,dbclick,keyup etc. are then events using these interfaces. So it is like a chain you see. The properties you mentioned might belong to any of the interface at top level and are available at these specific events.

Note, you can create events too. This is helpful when you want to trigger events on your own. You can start with new Event().

Tushar Shahi
  • 16,452
  • 1
  • 18
  • 39