1
00:00:02,220 --> 00:00:04,940
So let's explore events in Javascript,

2
00:00:04,950 --> 00:00:07,710
we already worked with some events,

3
00:00:07,710 --> 00:00:11,750
well mostly with the click event but we didn't do much with it.

4
00:00:11,760 --> 00:00:18,060
Now the core idea behind events does not just exist in Javascript but pretty much in any programming

5
00:00:18,060 --> 00:00:18,800
language.

6
00:00:18,840 --> 00:00:25,530
Most programming languages have some kinds of events architecture built in because the idea is that

7
00:00:25,530 --> 00:00:33,510
you can run code upon certain events and that could be a user clicking a button, an upload finishing,

8
00:00:34,230 --> 00:00:37,900
a video playback starting or finishing or being paused,

9
00:00:37,920 --> 00:00:42,900
there are a lot of events you could think about that should trigger some code to run.

10
00:00:42,900 --> 00:00:49,290
We could also think about more abstract events that could happen on a server, like an incoming request or

11
00:00:49,290 --> 00:00:54,930
some scheduled task which should run every x hours and is triggered by some timer.

12
00:00:55,470 --> 00:01:02,100
So the exact implementation of course differs between programming languages but also inside of Javascript,

13
00:01:02,100 --> 00:01:09,380
it differs between the browser side and for example the server side with Node.js. On the browser side,

14
00:01:09,390 --> 00:01:15,570
we saw we can use add event listener to add an event listener to a DOM node, in Node.js on the other hand,

15
00:01:15,600 --> 00:01:22,380
you often see on or once as methods you chain on some object which then allow you to listen to certain

16
00:01:22,380 --> 00:01:23,240
events.

17
00:01:23,310 --> 00:01:29,910
Even with that different syntax though, the general idea is the same and the idea also is that events

18
00:01:30,000 --> 00:01:33,400
often or typically transport data.

19
00:01:33,480 --> 00:01:36,850
We haven't really utilized this yet in this course,

20
00:01:36,960 --> 00:01:39,620
we always worked without utilizing it.

21
00:01:39,630 --> 00:01:46,860
Now in this module, we'll have a look at which data is being transported and you will get that data and

22
00:01:46,980 --> 00:01:54,480
object that is created for each event automatically as an argument passed into the function you register

23
00:01:54,480 --> 00:01:58,400
as an event listener and thus far we always ignored that argument,

24
00:01:58,410 --> 00:02:02,430
we always ignored that object but we actually do get it automatically,

25
00:02:02,430 --> 00:02:07,890
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

26
00:02:07,890 --> 00:02:14,760
just the case for browser side Javascript, for Node.js or for any other programming language even, it's

27
00:02:14,760 --> 00:02:20,430
typically the same, an event typically comes with some data which describes the event, which might hold

28
00:02:20,430 --> 00:02:27,140
some metadata, which basically helps you interact with that event and run some code based on it.

29
00:02:27,150 --> 00:02:32,060
Now as I mentioned in this module, I'll focus on the browser side simply because that's easiest for us,

30
00:02:32,070 --> 00:02:37,700
we can immediately see something there but the rough idea, the general idea of why we use events,

31
00:02:37,710 --> 00:02:39,390
that's of course always the same

32
00:02:39,510 --> 00:02:46,400
and as I also already mentioned, in the Node.js module, we'll also see how we would work with events there.

33
00:02:46,470 --> 00:02:52,430
So in the browser context, it's important to understand that we have different kinds of events

34
00:02:52,440 --> 00:02:59,550
we can listen to - a click on a button or a click on anything else, a right click or a double click, hovering

35
00:02:59,550 --> 00:03:02,730
over something or moving the mouse button away from something,

36
00:03:02,720 --> 00:03:09,420
these are all different kinds of events and indeed in Javascript for the browser therefore exposed by

37
00:03:09,420 --> 00:03:12,750
the browser into the Javascript we run in it as you learned,

38
00:03:12,810 --> 00:03:19,530
we have an event constructor function, a core event object you could say with some core functionalities

39
00:03:19,530 --> 00:03:21,330
which all events share

40
00:03:21,480 --> 00:03:28,080
but then we also have specialized event constructor functions which are based on that core event with

41
00:03:28,080 --> 00:03:33,300
the help of prototypes as you learned which hold additional information that only makes sense for certain

42
00:03:33,300 --> 00:03:34,200
events,

43
00:03:34,200 --> 00:03:39,690
for example we have a mouse event which also might yield the coordinates of the event, so the coordinates

44
00:03:39,690 --> 00:03:46,140
of the mouse button when the event occurred and in addition to that, might also hold an event target

45
00:03:46,170 --> 00:03:51,990
which describes the element in the DOM on which this event was triggered or which was responsible for

46
00:03:51,990 --> 00:03:53,360
this event.

47
00:03:53,430 --> 00:03:59,370
Now event target actually is exposed by that core event object and shared amongst all events which are

48
00:03:59,370 --> 00:04:05,430
provided by the browser, coordinates would be specific to the mouse event. The drag event which we'll

49
00:04:05,580 --> 00:04:11,520
also see later for example could hold some extra data which we can attach to a drag and drop interaction

50
00:04:11,820 --> 00:04:17,580
because such an interaction is a bit more complex and composed of the multiple events which kind of need

51
00:04:17,610 --> 00:04:24,570
to share information amongst each other, done with the help of some extra data that can be attached and

52
00:04:24,570 --> 00:04:29,740
it also has an event target and of course you have way more events with way more data,

53
00:04:29,910 --> 00:04:34,600
they have certain things in common like that event target and also a couple of other properties and

54
00:04:34,650 --> 00:04:39,840
methods but then they also have their own special data that only makes sense for this kind of event

55
00:04:39,840 --> 00:04:43,760
and in this module we'll of course also explore a couple of these events.

56
00:04:43,930 --> 00:04:48,990
Now with that, before we dive deeper, let's get a feeling for some of the events we can work with and

57
00:04:48,990 --> 00:04:55,390
for the data they provide to us. As always, MDN is also a great place to go to,

58
00:04:55,500 --> 00:05:01,380
if you search for MDN event and you click on that first search result, you can learn more about

59
00:05:01,380 --> 00:05:03,130
events which is of course nice

60
00:05:03,290 --> 00:05:10,100
but you can also find a detailed reference of the event object for example, on this page here and all

61
00:05:10,100 --> 00:05:14,220
the properties the event object has, all the methods it has as well.

62
00:05:14,240 --> 00:05:20,900
If you then scroll down to interfaces based on event, you will also find the more specialized events, like

63
00:05:20,900 --> 00:05:21,650
the mouse event

64
00:05:21,650 --> 00:05:26,990
I already talked about or also the drag event and a couple of other events which are in there as

65
00:05:26,990 --> 00:05:27,500
well,

66
00:05:27,500 --> 00:05:32,000
some of those will be events you probably never work with

67
00:05:32,010 --> 00:05:37,460
or only rarely and some of these will be event objects you work with quite regularly.

68
00:05:37,460 --> 00:05:42,890
Now you can always dive into these events to learn more about them, learn more about the relation

69
00:05:42,890 --> 00:05:47,810
between mouse event and event, as you see there actually is a constructor function in between, another

70
00:05:47,810 --> 00:05:53,090
interface in between if you want to call it like this and you learn about the specific properties

71
00:05:53,090 --> 00:05:57,080
and methods which in this case the mouse event has for example.

72
00:05:57,080 --> 00:06:02,660
So MDN as always is a resource you definitely should also check out learn more about events,

73
00:06:02,660 --> 00:06:08,600
learn all about available events, here for example you learned about the different events that trigger

74
00:06:08,600 --> 00:06:14,210
such a mouse event and to learn more about which properties exist there, if they are read-only, if

75
00:06:14,210 --> 00:06:15,350
you can change them

76
00:06:15,470 --> 00:06:16,240
and so on.