1
00:00:02,160 --> 00:00:09,210
Now one use case where this thing in front of your function execution will not really work is for example

2
00:00:09,210 --> 00:00:14,430
when you bind or set your function on an event listener.

3
00:00:14,430 --> 00:00:18,960
So the key thing really is that this refers to what called a function,

4
00:00:18,960 --> 00:00:24,630
the thing with what's in front of the function only works if you're executing the function on your own

5
00:00:24,630 --> 00:00:25,770
in your code.

6
00:00:25,770 --> 00:00:31,050
If you're setting it to an event listener like we're doing here with add movie handler, then we'll see

7
00:00:31,050 --> 00:00:32,220
something interesting,

8
00:00:32,220 --> 00:00:39,000
if I console log this in let's say the search movie handler which is also bound to an event, then what

9
00:00:39,000 --> 00:00:41,850
would you expect that this refers to here?

10
00:00:41,850 --> 00:00:46,700
Well since there is nothing in front of it, it would be the global context right but that's wrong,

11
00:00:46,710 --> 00:00:51,860
again this what's in front of it thing only makes sense if you're executing a function on your own,

12
00:00:51,870 --> 00:00:57,300
so if you added parentheses or if you're using apply or call, here we're not doing that.

13
00:00:57,480 --> 00:01:02,220
We're indirectly executing this if you will by binding it to an event listener.

14
00:01:02,220 --> 00:01:08,550
So therefore we have to focus on the first definition I named, which is that this refers to who's responsible

15
00:01:08,550 --> 00:01:14,190
for calling this and here, that will actually be the event if you will,

16
00:01:14,190 --> 00:01:20,390
so the browser will trigger that event where we click on a button the browser then triggers the function,

17
00:01:20,460 --> 00:01:26,660
so the browser is kind of responsible for executing this but in the end it's this event which is responsible,

18
00:01:26,670 --> 00:01:26,970
right?

19
00:01:26,970 --> 00:01:31,290
It's this click event which in the end is responsible for triggering this function

20
00:01:31,380 --> 00:01:36,120
and if we break it down even more it's the button that is responsible for executing this,

21
00:01:36,120 --> 00:01:36,660
right

22
00:01:36,690 --> 00:01:43,130
and that's actually how the browser configures this. When a function executes based on an event,

23
00:01:43,260 --> 00:01:51,360
then this inside of the function will actually refer to the object, to the element that's triggered

24
00:01:51,480 --> 00:01:53,730
that event which in the end triggered that function.

25
00:01:53,760 --> 00:01:55,680
However that's now also important,

26
00:01:55,740 --> 00:02:00,660
only if you're not using an arrow function because there is something special about arrow functions

27
00:02:00,830 --> 00:02:02,720
to which I'll come back in a second.

28
00:02:02,760 --> 00:02:08,460
For now let's switch this to a normal anonymous function with the function keyword and then save this

29
00:02:08,510 --> 00:02:09,990
and let's have a look at this.

30
00:02:10,020 --> 00:02:14,600
If I reload and click on search, we indeed see the button is output there,

31
00:02:14,610 --> 00:02:22,070
so this inside of a function that's triggered based on an event listener refers to the element or to

32
00:02:22,110 --> 00:02:26,320
the thing that is responsible for triggering this event.

33
00:02:26,370 --> 00:02:30,120
Now I said for arrow functions that would be different though, so let's have a look at that

34
00:02:30,120 --> 00:02:30,390
now.