1
00:00:02,250 --> 00:00:07,110
Now to finish this up before we dive into our practice project here,

2
00:00:07,170 --> 00:00:13,020
one note about the this keyword. We already saw earlier in the course that inside of the event listener

3
00:00:13,020 --> 00:00:13,700
functions,

4
00:00:13,710 --> 00:00:17,370
this is actually bound to something else, to the event's source

5
00:00:17,370 --> 00:00:23,430
as I mentioned and therefore in the past, we had to use bind or arrow functions to make sure that this

6
00:00:23,430 --> 00:00:26,010
actually points at the right thing.

7
00:00:26,020 --> 00:00:31,200
Now let's quickly see this in action again, on this button here where I added an event listener,

8
00:00:32,040 --> 00:00:37,290
let's not just console log event but also console log this here and see what we get.

9
00:00:37,320 --> 00:00:40,650
Now please note that here I'm using an arrow function though.

10
00:00:40,770 --> 00:00:43,370
So now if I reload and I click this click me button,

11
00:00:43,380 --> 00:00:49,290
you see I get the window object there because as I said, I'm using an arrow function and that ignores

12
00:00:49,350 --> 00:00:54,120
any bindings you might have assigned to this when this function gets called and here,

13
00:00:54,120 --> 00:01:00,540
the thing calling the function is the browser. The browser does bind this to something else though and

14
00:01:00,540 --> 00:01:08,320
to see this, let's convert this here into a regular function so to say, without the arrow but with

15
00:01:08,320 --> 00:01:13,480
the function keyword and still with the event object of course and let's see what this points at right

16
00:01:13,510 --> 00:01:16,390
now with a normal function being used here.

17
00:01:16,720 --> 00:01:22,780
If we now reload this and click on that button, now you see this points at the button here,

18
00:01:22,780 --> 00:01:30,670
so in the end this points at the event target, to be precise as I can show you here on our list event

19
00:01:30,670 --> 00:01:31,760
listener here,

20
00:01:31,840 --> 00:01:40,120
if we console log this down there and transform this to a regular function as well and not an arrow

21
00:01:40,120 --> 00:01:41,170
function,

22
00:01:41,170 --> 00:01:46,090
so to be precise as you see if you click down there, it points at the current target,

23
00:01:46,300 --> 00:01:51,310
so not at the concrete target you clicked on but at the current target,

24
00:01:51,310 --> 00:01:55,170
so basically at the element on which you registered the event listener,

25
00:01:55,300 --> 00:02:01,820
that's what the this keyword refers to inside of a function you add as an event handler function, so

26
00:02:01,840 --> 00:02:03,820
you assign to an event listener

27
00:02:03,820 --> 00:02:09,610
if you don't override it yourselves by binding this function to something else and binding the this

28
00:02:10,060 --> 00:02:14,950
inside of that function to something else therefore or by using an arrow function as you saw, this is

29
00:02:14,950 --> 00:02:19,990
how you can kind of override or change this behavior, by default with a normal function.

30
00:02:19,990 --> 00:02:25,900
This inside of a function which you assign to an event listener points at the current target of this

31
00:02:25,900 --> 00:02:26,250
event.