So let's explore events in Javascript,
we already worked with some events,
well mostly with the click event but we didn't do much with it.
Now the core idea behind events does not just exist in Javascript but pretty much in any programming
language.
Most programming languages have some kinds of events architecture built in because the idea is that
you can run code upon certain events and that could be a user clicking a button, an upload finishing,
a video playback starting or finishing or being paused,
there are a lot of events you could think about that should trigger some code to run.
We could also think about more abstract events that could happen on a server, like an incoming request or
some scheduled task which should run every x hours and is triggered by some timer.
So the exact implementation of course differs between programming languages but also inside of Javascript,
it differs between the browser side and for example the server side with Node.js. On the browser side,
we saw we can use add event listener to add an event listener to a DOM node, in Node.js on the other hand,
you often see on or once as methods you chain on some object which then allow you to listen to certain
events.
Even with that different syntax though, the general idea is the same and the idea also is that events
often or typically transport data.
We haven't really utilized this yet in this course,
we always worked without utilizing it.
Now in this module, we'll have a look at which data is being transported and you will get that data and
object that is created for each event automatically as an argument passed into the function you register
as an event listener and thus far we always ignored that argument,
we always ignored that object but we actually do get it automatically,
so in this module, we'll also learn how to use it and what's in this object and that's by the way not
just the case for browser side Javascript, for Node.js or for any other programming language even, it's
typically the same, an event typically comes with some data which describes the event, which might hold
some metadata, which basically helps you interact with that event and run some code based on it.
Now as I mentioned in this module, I'll focus on the browser side simply because that's easiest for us,
we can immediately see something there but the rough idea, the general idea of why we use events,
that's of course always the same
and as I also already mentioned, in the Node.js module, we'll also see how we would work with events there.
So in the browser context, it's important to understand that we have different kinds of events
we can listen to - a click on a button or a click on anything else, a right click or a double click, hovering
over something or moving the mouse button away from something,
these are all different kinds of events and indeed in Javascript for the browser therefore exposed by
the browser into the Javascript we run in it as you learned,
we have an event constructor function, a core event object you could say with some core functionalities
which all events share
but then we also have specialized event constructor functions which are based on that core event with
the help of prototypes as you learned which hold additional information that only makes sense for certain
events,
for example we have a mouse event which also might yield the coordinates of the event, so the coordinates
of the mouse button when the event occurred and in addition to that, might also hold an event target
which describes the element in the DOM on which this event was triggered or which was responsible for
this event.
Now event target actually is exposed by that core event object and shared amongst all events which are
provided by the browser, coordinates would be specific to the mouse event. The drag event which we'll
also see later for example could hold some extra data which we can attach to a drag and drop interaction
because such an interaction is a bit more complex and composed of the multiple events which kind of need
to share information amongst each other, done with the help of some extra data that can be attached and
it also has an event target and of course you have way more events with way more data,
they have certain things in common like that event target and also a couple of other properties and
methods but then they also have their own special data that only makes sense for this kind of event
and in this module we'll of course also explore a couple of these events.
Now with that, before we dive deeper, let's get a feeling for some of the events we can work with and
for the data they provide to us. As always, MDN is also a great place to go to,
if you search for MDN event and you click on that first search result, you can learn more about
events which is of course nice
but you can also find a detailed reference of the event object for example, on this page here and all
the properties the event object has, all the methods it has as well.
If you then scroll down to interfaces based on event, you will also find the more specialized events, like
the mouse event
I already talked about or also the drag event and a couple of other events which are in there as
well,
some of those will be events you probably never work with
or only rarely and some of these will be event objects you work with quite regularly.
Now you can always dive into these events to learn more about them, learn more about the relation
between mouse event and event, as you see there actually is a constructor function in between, another
interface in between if you want to call it like this and you learn about the specific properties
and methods which in this case the mouse event has for example.
So MDN as always is a resource you definitely should also check out learn more about events,
learn all about available events, here for example you learned about the different events that trigger
such a mouse event and to learn more about which properties exist there, if they are read-only, if
you can change them
and so on.