1
00:00:00,390 --> 00:00:06,630
This is where the fun begins, because we get to create interaction on elements within our page by adding

2
00:00:06,630 --> 00:00:12,360
event listeners to those elements, and the way that you can do that is you select your event, you

3
00:00:12,360 --> 00:00:17,580
select your target element, and you can add event listener method to that element.

4
00:00:17,820 --> 00:00:21,920
And there's, of course, some examples here of the Mozilla developer network.

5
00:00:22,170 --> 00:00:23,550
So take a quick look at those.

6
00:00:23,700 --> 00:00:25,570
So the syntax is the target.

7
00:00:25,590 --> 00:00:26,670
So this is the element.

8
00:00:26,850 --> 00:00:33,240
And then using the dot and method, you need to select the type of event that you're adding for the

9
00:00:33,240 --> 00:00:33,780
listener.

10
00:00:33,780 --> 00:00:38,190
You need to specify what's going to happen, what the blockquote is or the function that's going to

11
00:00:38,190 --> 00:00:41,370
get invoked once that event gets fired off.

12
00:00:41,520 --> 00:00:44,330
There's a few other options as well, which we're going to be discussing.

13
00:00:44,610 --> 00:00:47,490
There's some examples here of how to add that that list.

14
00:00:47,820 --> 00:00:50,820
And you can also remove that listeners as well.

15
00:00:51,000 --> 00:00:55,490
So attaching the event listener to the element and then removing the event listener as well.

16
00:00:55,500 --> 00:00:58,710
So it's another option when you are selecting and adding events.

17
00:00:58,920 --> 00:01:04,470
There's a lot of different types of events such as Mossop and most commonly, of course, is the click

18
00:01:04,470 --> 00:01:04,720
event.

19
00:01:04,740 --> 00:01:06,360
So you probably heard of those ones.

20
00:01:06,480 --> 00:01:11,490
So we can add events to any one of the elements on the page, opening up the editor.

21
00:01:11,520 --> 00:01:13,290
First, we're going to select the elements.

22
00:01:13,290 --> 00:01:20,520
We're going to select that each one again using document and this time will do get element by ID, refresh,

23
00:01:20,520 --> 00:01:24,300
make sure that we do have that element as an object so we are able to select it.

24
00:01:24,540 --> 00:01:26,760
So let's add a click event to that element.

25
00:01:27,090 --> 00:01:32,940
So all we to do is specify the element as an object, add event, listener and event that we're adding

26
00:01:32,940 --> 00:01:38,820
in is a click event and then the function or the block of code that we want to invoke and run when it

27
00:01:38,820 --> 00:01:39,360
gets click.

28
00:01:39,510 --> 00:01:41,730
And for now we're just going to output into the console.

29
00:01:41,910 --> 00:01:44,790
We're going to just say click so we refresh it.

30
00:01:44,790 --> 00:01:51,810
Now, whenever we click on that element, let's this one here that says this is the first div and we

31
00:01:51,810 --> 00:01:56,990
see that the function is invoking the block of code and we're outputting the console information.

32
00:01:57,660 --> 00:02:03,720
There's also another option that you might see occasionally where you've got another comma in here and

33
00:02:03,720 --> 00:02:05,460
you're going to see there a boolean value.

34
00:02:05,470 --> 00:02:07,080
So either a true or false.

35
00:02:07,410 --> 00:02:10,110
So what this is this is for the capture.

36
00:02:10,380 --> 00:02:15,870
And if it's true, the events execute top to down in the capture phase.

37
00:02:15,870 --> 00:02:19,530
And when it's false, it does the bubble bottom to the top.

38
00:02:19,860 --> 00:02:23,730
And so right now, with the newer versions of JavaScript, that is an option.

39
00:02:23,880 --> 00:02:25,470
So you don't have to include it.

40
00:02:25,590 --> 00:02:27,180
And it's not specified.

41
00:02:27,180 --> 00:02:29,580
The use captured defaults to false.

42
00:02:29,730 --> 00:02:32,700
So that's a way to specify which order the click.

43
00:02:32,710 --> 00:02:38,040
So if you have multiple elements inside of other elements, it helps you determine the order which those

44
00:02:38,040 --> 00:02:40,050
events are going to get invoked and fired off.

45
00:02:40,440 --> 00:02:46,710
So also another way to add the event listener so you can do add event listener and let's do another

46
00:02:46,710 --> 00:02:52,290
one here where we've got a click and you can also in a function and then create the function and will

47
00:02:52,290 --> 00:02:54,120
console log and this would be H1.

48
00:02:54,240 --> 00:02:55,410
So let's refresh.

49
00:02:55,890 --> 00:02:59,010
And now you see that both of those events are being invoked.

50
00:02:59,430 --> 00:03:01,440
Let's take a closer look at that object.

51
00:03:01,740 --> 00:03:09,390
And when you do the console director of the H1 object and open it, you can see within the console options

52
00:03:09,390 --> 00:03:10,760
for different events.

53
00:03:11,070 --> 00:03:13,860
So these are all the different types of events that we can have.

54
00:03:14,010 --> 00:03:15,900
We can have CLECs, we can have change.

55
00:03:16,110 --> 00:03:20,130
We can have double clicks and key downs, key presses.

56
00:03:21,490 --> 00:03:25,780
So you have two different options and notice as well when you do add in the function that we're not

57
00:03:25,780 --> 00:03:28,920
invoking the function because it's expecting a function parameter.

58
00:03:29,230 --> 00:03:34,700
So that's why we've got the function in there as an anonymous function or we can call to a named function.

59
00:03:35,110 --> 00:03:37,660
So there is a challenge, of course, for this lesson.

60
00:03:37,840 --> 00:03:45,670
And that's the add the ability on elements with the class of list item and toggle, the class read of

61
00:03:45,670 --> 00:03:47,140
the element when it gets clicked.

62
00:03:47,440 --> 00:03:52,780
So we want to make adding event listeners to all of those and then making them clickable when it gets

63
00:03:52,780 --> 00:03:53,830
clicked the second time.

64
00:03:54,010 --> 00:03:55,230
So that's the toggle effect.

65
00:03:55,510 --> 00:03:59,860
So go ahead, pause the video and I'll walk you through the solution coming up and make a quick update

66
00:03:59,860 --> 00:04:02,530
to the HTML document that we've been using.

67
00:04:02,570 --> 00:04:08,380
We've added in a bunch of list items that have a class now of list item and there are some that have

68
00:04:08,380 --> 00:04:09,010
links still.

69
00:04:09,010 --> 00:04:13,540
But they're not they don't they're not going to be included in this list because they don't have list

70
00:04:13,540 --> 00:04:14,580
item attached to them.

71
00:04:14,950 --> 00:04:20,950
So going into the JavaScript, the first thing that we want to do is create that element list so that

72
00:04:20,950 --> 00:04:24,340
we can iterate through them because we want to make them all clickable.

73
00:04:24,550 --> 00:04:30,100
And that's where we're going to use the query selector, all in order to make the selection, selecting

74
00:04:30,100 --> 00:04:34,660
all of the elements that have list item as a class.

75
00:04:35,140 --> 00:04:41,410
And then we can loop through all of the elements using typical for loop where we're looping through

76
00:04:41,530 --> 00:04:46,000
while the element lists, while X is less than the element list length.

77
00:04:46,120 --> 00:04:49,240
And then we're just incrementing X so that we can go through the list.

78
00:04:49,840 --> 00:04:57,130
And I want to console log out that element list item as we iterate through the list so we get them all

79
00:04:57,130 --> 00:05:03,130
listed and I'm going to add something so that they're more visible so I can update their style properties

80
00:05:03,910 --> 00:05:08,530
to give them background color of yellow so that we can see them a little bit better.

81
00:05:08,540 --> 00:05:15,340
And also, as we're iterating through, I want to update the style and add in some padding so we can

82
00:05:15,340 --> 00:05:17,260
separate them out from the rest of the element.

83
00:05:17,590 --> 00:05:21,280
So now we've got all of the ones that are yellow are all the clickable ones.

84
00:05:21,280 --> 00:05:24,580
So that way we can see them visibly and you don't have to do that.

85
00:05:24,580 --> 00:05:29,470
But it's just one way that while we're going through the exercise, we could add that in and we could

86
00:05:29,470 --> 00:05:31,710
update it via JavaScript so we can see it better.

87
00:05:31,900 --> 00:05:37,400
So now it comes to the adding the event listener and the event listener that we're adding is is a click.

88
00:05:37,420 --> 00:05:43,390
So we're listening for a click and we're going to include a function that says make it red and that's

89
00:05:43,390 --> 00:05:43,540
it.

90
00:05:43,540 --> 00:05:45,620
And then just go down and create that function.

91
00:05:46,000 --> 00:05:48,580
You could have also done it as an anonymous function.

92
00:05:49,570 --> 00:05:54,520
So that was an option as well and will console log through that element.

93
00:05:54,850 --> 00:06:02,290
And this is a great, great opportunity to take a look at this keyword, this in JavaScript.

94
00:06:02,530 --> 00:06:05,740
And what that does is that actually is going to refer to the element.

95
00:06:05,920 --> 00:06:11,080
So when I click it and if I clear this out, you're going to see that it's going to it's referring to

96
00:06:11,080 --> 00:06:12,160
the existing element.

97
00:06:12,430 --> 00:06:15,160
So there's a number of different ways to access that element.

98
00:06:15,400 --> 00:06:18,190
So if we wanted to, we could pass it in as well.

99
00:06:18,400 --> 00:06:21,010
But it already is existing within this.

100
00:06:21,280 --> 00:06:28,300
So we know that once we can access this, then we can select it and we can toggle the class.

101
00:06:28,750 --> 00:06:30,400
So we've got classless.

102
00:06:30,430 --> 00:06:37,210
So this is from before and toggle and we're going to toggle the class of red, also going to logout

103
00:06:37,210 --> 00:06:37,660
temp.

104
00:06:37,870 --> 00:06:41,350
And as we saw before that there is a return value there.

105
00:06:41,350 --> 00:06:43,210
So there is a return boolean value.

106
00:06:43,390 --> 00:06:45,310
So we see the first time we click it, it's true.

107
00:06:45,520 --> 00:06:47,560
Then it goes false, true, false.

108
00:06:47,770 --> 00:06:49,990
I'll make it a little bit bigger so it's easier to see.

109
00:06:50,170 --> 00:06:54,820
So any one of these elements, you can see that when I do click on them, the font goes red because

110
00:06:54,820 --> 00:06:56,260
it's adding in that red class.

111
00:06:56,410 --> 00:06:58,960
And you can see that within the element what's being listed out.

112
00:06:58,960 --> 00:07:02,350
So you've got list item red is being listed in there.

113
00:07:02,470 --> 00:07:07,090
So there's a number of solutions here as well as you could have done an anonymous function as well.

114
00:07:07,090 --> 00:07:11,620
So that was another opportunity that you could do and you could list it out.

115
00:07:11,620 --> 00:07:17,500
And then as we're selecting that element, so this is also going to refer to the same element.

116
00:07:17,590 --> 00:07:25,090
And we could do a class list toggle and we can have that same effect here so we can add and remove the

117
00:07:25,090 --> 00:07:26,200
red class to them.

118
00:07:26,380 --> 00:07:30,130
So that's going to do the same thing, same effect, except, of course, we're not outputting to the

119
00:07:30,130 --> 00:07:30,580
console.