1
00:00:02,260 --> 00:00:09,970
So now that we can close and open our modal, let's dispatch our own events. Now how do we do that?

2
00:00:09,970 --> 00:00:17,020
Well for that, let me first of all accept, on the canceled event, the event object. We get this automatically,

3
00:00:17,320 --> 00:00:23,290
we get this automatically because we used this click event listener here and Javascript just works in

4
00:00:23,290 --> 00:00:29,500
a way that the method which gets triggered for this event automatically receives an object with some

5
00:00:29,590 --> 00:00:33,100
metadata about the event that was created by Javascript,

6
00:00:33,100 --> 00:00:35,250
so about that built-in event.

7
00:00:35,350 --> 00:00:38,750
Now we don't need that event to dispatch our own once,

8
00:00:38,870 --> 00:00:41,260
we will not copy it or anything like that

9
00:00:41,620 --> 00:00:48,220
but on this event with event target, I get access to the target that is responsible for this event,

10
00:00:48,220 --> 00:00:56,620
so in my case the button and this button, just like every other HTML element, is capable of dispatching

11
00:00:56,920 --> 00:01:05,310
a new event with the dispatch event method. The dispatch event method takes a new event,

12
00:01:05,310 --> 00:01:10,350
so a totally new event, not this event we receive here, a new event as an argument.

13
00:01:10,350 --> 00:01:13,500
So here I'll name this cancel event,

14
00:01:13,500 --> 00:01:14,860
the name is totally up to you

15
00:01:14,910 --> 00:01:20,730
and I create it with the new keyword which we use in Javascript to create new objects based on constructor

16
00:01:20,730 --> 00:01:24,590
functions or classes and I'll use the built-in event object,

17
00:01:24,600 --> 00:01:33,040
so this is built into Javascript, just as the HTML element is. So now I can create a new event here and we

18
00:01:33,040 --> 00:01:39,520
give this event our own name by passing it in the constructor here, between quotation marks,

19
00:01:39,520 --> 00:01:43,180
so as a string and here I'll name this cancel

20
00:01:43,180 --> 00:01:48,490
and this is exactly the name to which we will be able to listen to from outside later.

21
00:01:48,490 --> 00:01:55,390
So here, I am listening to the cancel event in my index.html file and this should work later because

22
00:01:55,420 --> 00:01:58,990
I'm dispatching an event named cancel here.

23
00:01:59,020 --> 00:02:04,060
So now I pass this cancel event to my dispatch event function

24
00:02:04,270 --> 00:02:06,790
and with that, let's see if that works,

25
00:02:06,850 --> 00:02:12,240
let's go back and reload here, click that and click cancel

26
00:02:12,430 --> 00:02:18,490
and we don't see canceled here in the console, even though we should be logging that here when we listen

27
00:02:18,500 --> 00:02:19,930
to the cancel event.

28
00:02:19,930 --> 00:02:27,830
So somehow our own event doesn't really seem to be dispatched on our component and indeed it isn't and

29
00:02:27,830 --> 00:02:33,380
it is dispatched on the button because, and that is the only reason why I accepted the event argument

30
00:02:33,380 --> 00:02:34,150
here,

31
00:02:34,200 --> 00:02:40,130
we're dispatching it on the event target of the cancel event or of the cancel event handler I should

32
00:02:40,130 --> 00:02:40,910
say

33
00:02:40,910 --> 00:02:44,550
and that event handler is used on the click event of the cancel button.

34
00:02:44,660 --> 00:02:47,900
So the event target of that event is the cancel button,

35
00:02:47,900 --> 00:02:53,660
so we're using that HTML element to dispatch the event here and therefore the only place where we

36
00:02:53,660 --> 00:02:57,090
can listen to that is that button.

37
00:02:57,110 --> 00:03:04,910
So if I would add an event listener here and I would listen for the cancel event here and there I just

38
00:03:04,910 --> 00:03:12,210
use an anonymous arrow function to quickly output cancel inside the component,

39
00:03:12,500 --> 00:03:17,450
then we should see that log once we click the cancel button because now we're listening to the same

40
00:03:17,450 --> 00:03:22,540
element where we dispatch this and indeed, here we see cancel inside the component.

41
00:03:22,550 --> 00:03:25,890
So the good thing is dispatching our customer event works,

42
00:03:25,940 --> 00:03:29,390
the bad thing is it is only available on our button,

43
00:03:29,480 --> 00:03:33,060
it doesn't leave our component and that is not ideal.

44
00:03:33,080 --> 00:03:36,040
Let's work on that and I'll comment this out here,

45
00:03:36,050 --> 00:03:38,210
let's work on this in the next lecture.