1
00:00:02,540 --> 00:00:07,940
With that we learned a lot about events, how to listen to them, how to work with the event object, what

2
00:00:07,940 --> 00:00:13,600
we can get out of the event object and also about this event delegation pattern.

3
00:00:13,600 --> 00:00:19,460
Now sometimes, you don't want to listen to an event or at least not just listen to an event,

4
00:00:19,460 --> 00:00:22,970
you also might want to trigger an event programmatically.

5
00:00:22,970 --> 00:00:28,970
I'll show you an example for when you could do that a little bit later in this module, in our project

6
00:00:29,320 --> 00:00:30,620
application,

7
00:00:30,860 --> 00:00:33,250
let's for now just see how it would work.

8
00:00:33,320 --> 00:00:41,480
Let's say when I click any list item for whatever reason, I also want to trigger a click event on my

9
00:00:41,480 --> 00:00:41,930
button.

10
00:00:42,050 --> 00:00:48,710
So first of all here, I'll again listen to a click event so that I can see that it worked but now back

11
00:00:48,710 --> 00:00:54,590
to the list item from inside this event listener, I want to trigger this event listener.

12
00:00:54,590 --> 00:00:59,900
Now of course, we could store this function in a named function and then just call this function from

13
00:00:59,900 --> 00:01:00,770
inside here

14
00:01:00,770 --> 00:01:03,440
but let's say for whatever reason, that's not really an option,

15
00:01:03,530 --> 00:01:05,070
we really want to click that,

16
00:01:05,330 --> 00:01:11,210
a better example might be with our form by the way. There we could say we want to submit the form, not

17
00:01:11,210 --> 00:01:16,880
just with the submit button in there but also when something else happens on the page,

18
00:01:16,880 --> 00:01:20,900
that's probably a better example because it's a bit more realistic.

19
00:01:20,900 --> 00:01:26,470
So let's say when we click any list item for whatever reason, we want to submit this form. Now

20
00:01:26,540 --> 00:01:29,840
to do that, we need access to that form element,

21
00:01:29,840 --> 00:01:34,120
so we need access to the element for which we want to trigger an event

22
00:01:34,130 --> 00:01:41,180
and then here in this case on a list item or when the list is clicked or any item in the list, I want

23
00:01:41,180 --> 00:01:51,080
to call form and now you can call click there for example to simulate a mouse click on it or also submit,

24
00:01:51,350 --> 00:01:52,770
as a method just like that

25
00:01:52,770 --> 00:01:58,010
and this does not just exist for the form but basically for any DOM element,

26
00:01:58,010 --> 00:02:03,440
a lot of the events you can listen to can also be triggered programmatically, especially something like

27
00:02:03,440 --> 00:02:05,760
clicks or form submissions.

28
00:02:05,810 --> 00:02:13,430
So now with that if you save this and you reload, you will see that if I click any list item here, the

29
00:02:13,430 --> 00:02:16,520
page reloaded because the form was submitted.

30
00:02:16,520 --> 00:02:21,350
Now you might be wondering why our event listener here for the form submission is not doing its work

31
00:02:21,350 --> 00:02:22,670
and preventing the default.

32
00:02:22,670 --> 00:02:28,940
Now if you trigger a submit event programmatically, then indeed the submit event listener is skipped,

33
00:02:29,000 --> 00:02:35,060
typically event listeners execute. If I for example instead of submitting the form simulate a click on

34
00:02:35,060 --> 00:02:35,930
my button

35
00:02:36,050 --> 00:02:41,420
and please note that I do have a click listener on the button, you will see that if I do that and I reload,

36
00:02:42,110 --> 00:02:47,540
this click listener does execute, though with a dummy mouse event where all coordinates are zero by the

37
00:02:47,540 --> 00:02:52,260
way. For form submission, the event listener is not triggered.

38
00:02:52,280 --> 00:02:58,240
So triggering such an event programmatically is not exactly the same as when a user clicks on it,

39
00:02:58,310 --> 00:03:04,730
it can bypass certain listeners like a form submission listener. Still from time to time it can be useful

40
00:03:04,910 --> 00:03:06,890
and it is good to be aware of it.

41
00:03:07,280 --> 00:03:13,280
Now if you still wanted to work around that by the way, you could of course select the submit button

42
00:03:13,280 --> 00:03:19,370
here in the form and instead of calling submit on the entire form, you call click on the submit button,

43
00:03:19,640 --> 00:03:25,100
then it will basically do the same as if a user click the submit button which will trigger the submit

44
00:03:25,100 --> 00:03:27,950
the event listener and allow you to prevent the default,

45
00:03:27,950 --> 00:03:29,450
so that would be possible.

46
00:03:29,450 --> 00:03:34,700
So even if you need to submit the form, you can still trigger that programmatically by simulating or

47
00:03:34,700 --> 00:03:38,540
by triggering a click on the button instead of the form submission itself.