1
00:00:00,210 --> 00:00:05,370
In this lesson, we're going to be applying the JavaScript event listener, so this allows us to create

2
00:00:05,370 --> 00:00:10,140
interaction with the page elements and we've already selected the elements.

3
00:00:10,140 --> 00:00:16,410
And the last lesson and in this case were as we loop through them, we're adding the event listener

4
00:00:16,410 --> 00:00:20,460
method and the one that we're listening for, the event that we're listening for is a click.

5
00:00:20,670 --> 00:00:24,390
And then when it gets clicked, get it to invoke a function.

6
00:00:24,570 --> 00:00:26,990
And I've called this function toggle element.

7
00:00:27,270 --> 00:00:30,650
And right now we're outputting in the console the event.

8
00:00:30,930 --> 00:00:38,580
So whatever gets passed here, the event target and as well as this object referring to the element

9
00:00:38,850 --> 00:00:41,430
that is being referenced here as this.

10
00:00:41,460 --> 00:00:47,730
So you can pause the video and add the event listener to each one of the elements, try it out and see

11
00:00:47,730 --> 00:00:49,530
what gets output in the console.

12
00:00:49,860 --> 00:00:52,280
And I'll walk you through the solution coming up.

13
00:00:57,210 --> 00:01:02,850
And if you do need more information about that event, listener, there's more information available

14
00:01:02,850 --> 00:01:08,910
at the Mozilla Developer Network, so they've got a bunch of examples as well as some of the parameters

15
00:01:08,910 --> 00:01:10,080
that you can set up.

16
00:01:10,380 --> 00:01:15,450
And Passan, so you can also add as an option to only have it clicked once.

17
00:01:15,750 --> 00:01:21,810
So this is a really neat one that I've used several times within projects that allow the Eventless strongly

18
00:01:21,810 --> 00:01:23,010
to fire off one time.

19
00:01:23,380 --> 00:01:28,200
And this also saves you the trouble of having to remove it after it's been invoked.

20
00:01:28,440 --> 00:01:34,830
There's also the use captcha and there's several other options that you might want to apply, depending

21
00:01:34,830 --> 00:01:37,550
on what the need is and how you want to handle the event.

22
00:01:37,920 --> 00:01:43,980
So going into the code, as we're looping through all of the elements, we've got the element as an

23
00:01:43,980 --> 00:01:51,630
elitist object and we can add an event, listener and event listener gives us a choice of the different

24
00:01:51,630 --> 00:01:52,980
events that we can listen for.

25
00:01:53,160 --> 00:01:56,760
And this particular event that we're listening for is called Click.

26
00:01:57,210 --> 00:02:02,070
And then let's create a function that we're going to toggle that element and that's it.

27
00:02:02,070 --> 00:02:04,500
That's all we have to add in order to add the event listener.

28
00:02:04,680 --> 00:02:10,680
And then, of course, we need to create the function that can handle the picking up of the event object.

29
00:02:11,070 --> 00:02:18,360
And we're passing in the event object as a parameter into this function and console like about the contents

30
00:02:18,360 --> 00:02:19,940
of the event.

31
00:02:20,280 --> 00:02:29,280
We're also going to console log out the active object and also lock out the contents of event target.

32
00:02:29,430 --> 00:02:31,260
And I'll show you what the difference is.

33
00:02:31,530 --> 00:02:37,580
And you can also get the elements by using that event target as well.

34
00:02:37,590 --> 00:02:39,260
So there's a number of ways to do this.

35
00:02:39,390 --> 00:02:41,010
Let's check out how this works.

36
00:02:41,010 --> 00:02:48,390
And I clear the console so that when I click any of these, we get this most of it, and it shows all

37
00:02:48,390 --> 00:02:49,740
of the elements.

38
00:02:49,920 --> 00:02:55,990
And the one that we're particularly looking at is that this is actually invoking the full panel.

39
00:02:56,400 --> 00:02:59,460
This is only getting the head because we clicked on the head.

40
00:02:59,550 --> 00:03:03,930
And then also the mouse event is capturing all of this information.

41
00:03:04,140 --> 00:03:09,990
So it also includes the event target, which is the element that was clicked.

42
00:03:09,990 --> 00:03:16,360
And we don't want to use the head because we want to select the panel as the main object.

43
00:03:16,770 --> 00:03:22,830
So going back into the console and it can clear that, see, the one that we want to use and the easiest

44
00:03:22,830 --> 00:03:25,730
one to use is the one that's selecting the entire panel.

45
00:03:26,130 --> 00:03:32,610
So that's the this object is selecting the entire panel because that's the whole active element that

46
00:03:32,610 --> 00:03:35,450
had the event listener on it and that invoked the event.

47
00:03:35,640 --> 00:03:40,710
So the next lesson we're going to make the functionality for the accordion.