1
00:00:02,450 --> 00:00:07,930
So now that we know how to add events or how to listen to events and how to remove event listeners

2
00:00:07,940 --> 00:00:09,650
which can also be quite handy,

3
00:00:09,650 --> 00:00:15,620
let's have a look at that event object which is generated automatically, by the browser in this case

4
00:00:15,620 --> 00:00:20,420
and passed into our event handler and which in general though, even if you're not working in the browser

5
00:00:20,420 --> 00:00:23,540
is a core idea behind event driven code.

6
00:00:23,660 --> 00:00:29,840
Whatever causes an event typically also provides you some data along with such an event to describe it,

7
00:00:29,840 --> 00:00:35,790
to give you some extra metadata or to give you methods to control how the event behaves thereafter,

8
00:00:35,900 --> 00:00:39,260
important for some more complex events for example.

9
00:00:39,500 --> 00:00:46,550
So therefore here on the button click handler, instead of just showing an alert,

10
00:00:46,580 --> 00:00:48,040
let's accept the argument.

11
00:00:48,110 --> 00:00:55,340
You can name this argument however you want, often it's named event or ev or just e because it is describing

12
00:00:55,340 --> 00:00:59,810
the event we're getting but since it's your function, you can name this whoever you want of course

13
00:00:59,900 --> 00:01:02,870
and then here I want to console log that event object,

14
00:01:02,870 --> 00:01:05,890
it will be an object so that we can look into it.

15
00:01:05,900 --> 00:01:12,600
So now when we click our button, this will be logged. For now by the way, I will also change this back

16
00:01:12,600 --> 00:01:16,930
here to directly point at the button click handler down there.

17
00:01:16,950 --> 00:01:23,220
So if we save that and we then reload and click on this button, we see we get a mouse event here and

18
00:01:23,220 --> 00:01:28,200
we see it has a bunch of properties and it actually also has a bunch of methods which we just don't see

19
00:01:28,200 --> 00:01:30,350
here when it's output like this.

20
00:01:30,360 --> 00:01:35,340
Now we have a bunch of properties which in the end describe the event.

21
00:01:35,370 --> 00:01:39,570
This for example tells us if the alt key was pressed whilst we clicked

22
00:01:39,750 --> 00:01:45,030
and that can be interesting for building certain user interfaces where you maybe want to do something

23
00:01:45,030 --> 00:01:45,400
else

24
00:01:45,420 --> 00:01:50,210
if the alt key was pressed while the user clicked somewhere versus when it was not clicked,

25
00:01:50,250 --> 00:01:56,850
you'll have similar properties for the control key for example. We see which button was pressed, zero

26
00:01:56,900 --> 00:02:01,550
is the left button, if I right click this by the way, nothing happens because I haven't registered this,

27
00:02:02,150 --> 00:02:07,260
only a left click works and you will have to reload to click again because we still remove this here,

28
00:02:07,280 --> 00:02:08,210
right?

29
00:02:08,210 --> 00:02:09,400
So back to the event here

30
00:02:09,410 --> 00:02:13,580
then, we see which button was used, left button.

31
00:02:13,580 --> 00:02:19,720
We then also have client(x) and client(y) and that would be the exact coordinates of where my pointer was,

32
00:02:19,730 --> 00:02:22,110
so the mouse cursor was when I clicked.

33
00:02:22,160 --> 00:02:25,320
You can see if I reload and I click again somewhere else,

34
00:02:25,460 --> 00:02:29,600
these are different coordinates than before and so on.

35
00:02:29,600 --> 00:02:34,790
Now in general, check out the MDN documentation to get detailed explanations of all properties and

36
00:02:34,790 --> 00:02:35,990
what they do

37
00:02:35,990 --> 00:02:40,250
and of course also simply play around with that to learn more. As you see, for a 

38
00:02:40,250 --> 00:02:42,740
mouse event, you get various coordinates, here

39
00:02:42,740 --> 00:02:48,790
these are the general coordinates inside of the window, here for example we would have the coordinates

40
00:02:48,850 --> 00:02:51,630
inside of the button itself.

41
00:02:52,090 --> 00:02:54,790
So if I reload and click on the top left for example,

42
00:02:59,450 --> 00:03:04,130
you see that would be pretty small because coordinate system starts on the top left and I clicked very

43
00:03:04,130 --> 00:03:08,230
close on the top left and therefore I get these very small coordinates.

44
00:03:08,240 --> 00:03:13,690
Now if we scroll down further, we see one very important property and that's the target property.

45
00:03:13,700 --> 00:03:20,300
Every event has this and this describes which target, which element in the end caused this event,

46
00:03:20,300 --> 00:03:26,390
so where, in this case where you clicked on. So target in this case gives us access to the button DOM

47
00:03:26,420 --> 00:03:33,140
element and this can be super useful of course because if you have a scenario where you want to

48
00:03:33,140 --> 00:03:39,290
interact with the DOM element on which you clicked, well then it's super convenient to have this target

49
00:03:39,290 --> 00:03:47,260
property which in the end gives you direct access to this element, here's an example. If we go back to

50
00:03:47,260 --> 00:03:51,940
events.html and we duplicate this button here real quick, click me too

51
00:03:55,090 --> 00:04:00,610
and we then alter our events.js file to register listeners in all these buttons and maybe not remove

52
00:04:00,610 --> 00:04:02,630
it anymore, so that

53
00:04:02,710 --> 00:04:08,550
here we don't select just a button but we use query selector all to select all buttons,

54
00:04:08,650 --> 00:04:14,650
so I rename this now and then down here, we can't use button add event listener anymore because we don't

55
00:04:14,650 --> 00:04:21,910
have a single button anymore but instead, we can go to buttons and then use ForEach to get access to

56
00:04:21,910 --> 00:04:27,490
each button we selected in this anonymous function I pass to ForEach and then in here, we can add

57
00:04:27,520 --> 00:04:35,850
our event listeners and register click events on the button click handler and now as you see if

58
00:04:35,860 --> 00:04:39,670
you reload, you can click either of the buttons to trigger that event.

59
00:04:39,670 --> 00:04:45,190
Now let's say we want to disable the button on which we clicked, well then it would be pretty hard to

60
00:04:45,190 --> 00:04:51,310
do this without knowing on which button exactly we clicked, we would probably have to create two different

61
00:04:51,370 --> 00:04:55,810
methods or functions which we assign as listeners, which would be pretty cumbersome.

62
00:04:56,380 --> 00:05:04,810
Well with event target, we can just say event.target.disabled equals true, buttons have a disabled

63
00:05:04,810 --> 00:05:08,080
property which you can set to true to disable them.

64
00:05:08,410 --> 00:05:11,830
Now let's also console log the event object still however

65
00:05:11,870 --> 00:05:15,660
so that we also get some output that proves that we click this and

66
00:05:15,820 --> 00:05:16,660
let's then reload

67
00:05:16,660 --> 00:05:21,520
and as you see if I click this now, I get this output but if I click it a second time, I don't get it

68
00:05:21,520 --> 00:05:23,700
because actually, the button was disabled.

69
00:05:23,710 --> 00:05:28,690
Now I haven't set up styles that would reflect this but if we inspect this element here, we also see it

70
00:05:28,690 --> 00:05:30,520
has the disabled attribute

71
00:05:30,790 --> 00:05:34,830
and if you click on the other button, you see that button gets this attribute as well.

72
00:05:34,870 --> 00:05:40,840
So this is very useful, event target gives us direct access to the direct element we clicked on.