1
00:00:00,000 --> 00:00:03,060
Welcome to the world of event listeners.

2
00:00:03,060 --> 00:00:05,780
Event listeners are very, very interesting things.

3
00:00:05,775 --> 00:00:09,455
So the first thing we need to do is look at syntax, kay?

4
00:00:09,450 --> 00:00:13,440
So actually the first thing we need to do is talk about what an event listener is.

5
00:00:13,440 --> 00:00:15,770
An event listener is.

6
00:00:15,765 --> 00:00:18,615
When you have a button on the page

7
00:00:18,615 --> 00:00:21,965
and say it says Click Me inside of it and you click that button.

8
00:00:21,960 --> 00:00:24,310
What is supposed to happen?

9
00:00:24,410 --> 00:00:26,580
That isn't event listener.

10
00:00:26,580 --> 00:00:30,570
Or if you have an input element and you start typing in it.

11
00:00:30,570 --> 00:00:36,010
Every one of those letters that you press on your keyboard is an event.

12
00:00:36,005 --> 00:00:37,615
Anytime you move your mouse,

13
00:00:37,610 --> 00:00:39,260
anytime you resize your screen,

14
00:00:39,260 --> 00:00:42,070
anytime you focus into an input element

15
00:00:42,065 --> 00:00:45,775
or blur out of an input element or like leave the input element.

16
00:00:45,770 --> 00:00:49,420
These are all events and we're going to be tackling a bunch of these in this course.

17
00:00:49,415 --> 00:00:52,865
So first things first, let's take a look at some of the syntax here.

18
00:00:52,865 --> 00:00:54,445
So there's two ways to do this.

19
00:00:54,440 --> 00:00:58,810
There's the, there's the right way which you're going to see in the jQuery docs.

20
00:00:58,805 --> 00:01:02,095
And then there's arguably an even better way to do it,

21
00:01:02,090 --> 00:01:07,190
which is going to be future proof to Ajax and document object model calls.

22
00:01:07,190 --> 00:01:09,290
So let's take a look at both.

23
00:01:09,290 --> 00:01:14,470
So first we have some sort of selector and so we can select the button.

24
00:01:14,465 --> 00:01:16,475
And then we can say dot click.

25
00:01:16,475 --> 00:01:18,935
And this is going to take a function.

26
00:01:18,935 --> 00:01:21,055
And so without the function,

27
00:01:21,050 --> 00:01:24,220
this is what it looks like. That's an event listener.

28
00:01:24,215 --> 00:01:29,485
Now this function that we're passing in here is merely what we want to do.

29
00:01:29,480 --> 00:01:31,850
So we can say console.log.

30
00:01:31,850 --> 00:01:33,670
I am clicked.

31
00:01:33,665 --> 00:01:36,995
And because we have this button on here on this page that says click me,

32
00:01:36,995 --> 00:01:38,185
let's go ahead and give this a shot.

33
00:01:38,180 --> 00:01:40,150
It says Click Me and in the console here,

34
00:01:40,145 --> 00:01:42,445
every time I click it, it says I am clicked.

35
00:01:42,440 --> 00:01:43,300
That's it.

36
00:01:43,295 --> 00:01:49,055
That's all there is to event listeners with jQuery is a super, super easy.

37
00:01:49,055 --> 00:01:50,815
Now there's another way to do this.

38
00:01:50,810 --> 00:01:52,460
I'm going to comment this out.

39
00:01:52,460 --> 00:01:55,010
And arguably this way is better.

40
00:01:55,010 --> 00:02:01,030
You can have a selector dot button and then you say dot on what you want it to do.

41
00:02:01,030 --> 00:02:02,170
What do you want it to listen for?

42
00:02:02,170 --> 00:02:04,570
You wanted it to listen for a click event.

43
00:02:04,570 --> 00:02:10,090
And then you pass in a function console.log.

44
00:02:10,090 --> 00:02:15,570
This is clickable to refresh your page.

45
00:02:15,565 --> 00:02:20,295
And it says this is clickable to now Justin,

46
00:02:20,290 --> 00:02:25,920
really make life crazy difficult and hard to learn jQuery.

47
00:02:25,915 --> 00:02:28,875
Let's learn a third way. And this is actually the best way,

48
00:02:28,870 --> 00:02:29,920
but we're not going to do the best.

49
00:02:29,920 --> 00:02:33,910
We were going to do the middle way moving forward throughout this course.

50
00:02:33,910 --> 00:02:38,610
But the best way is document dot on click,

51
00:02:38,605 --> 00:02:41,175
and then your button,

52
00:02:41,170 --> 00:02:45,640
and then your function, console.log.

53
00:02:45,640 --> 00:02:48,140
And let's just log 33333.

54
00:02:49,650 --> 00:02:52,330
And this works too.

55
00:02:52,330 --> 00:02:56,710
And so there's actually a reason we do it differently here.

56
00:02:56,710 --> 00:03:00,730
And so we're going to be using this method

57
00:03:00,730 --> 00:03:04,800
going forward just because it's the easiest to sort of write to understand.

58
00:03:04,795 --> 00:03:06,615
And this one is a little more complex,

59
00:03:06,610 --> 00:03:10,360
but there is a reason that we do the complex wave and the complex way is because what

60
00:03:10,360 --> 00:03:15,000
if we ajax or dynamically created a button?

61
00:03:14,995 --> 00:03:18,015
And let's go ahead and do this and I'll show you an example here.

62
00:03:18,010 --> 00:03:20,380
Div ID.

63
00:03:20,380 --> 00:03:22,330
Put.

64
00:03:22,330 --> 00:03:24,970
Button here.

65
00:03:24,970 --> 00:03:27,770
Let's go ahead and select this.

66
00:03:28,500 --> 00:03:31,020
So we can do constant.

67
00:03:31,015 --> 00:03:34,845
Let's call it parent is equal to that selector.

68
00:03:34,840 --> 00:03:37,910
Nope, that's id selector.

69
00:03:37,920 --> 00:03:41,320
Then we can do parent.value HTML.

70
00:03:41,320 --> 00:03:43,460
We can put a button in here.

71
00:03:46,980 --> 00:03:53,440
Click Me slash button, button, button.

72
00:03:53,440 --> 00:03:59,820
And let's go ahead and get rid of the Click me one as a Click Me dynamic button.

73
00:03:59,815 --> 00:04:00,915
That's what this is going to be.

74
00:04:00,910 --> 00:04:03,100
Click Me dynamic button, it shows up.

75
00:04:03,100 --> 00:04:05,520
There's no event listeners yet.

76
00:04:05,520 --> 00:04:07,320
Let's go ahead.

77
00:04:07,570 --> 00:04:11,570
And let's say this event listener was created first.

78
00:04:11,570 --> 00:04:14,920
So how JavaScript and jQuery is going to work is from the top to the bottom.

79
00:04:14,915 --> 00:04:16,745
It's going to select all the buttons on the page,

80
00:04:16,745 --> 00:04:19,505
and it's going to register a click function.

81
00:04:19,505 --> 00:04:22,495
But currently, at this point in time,

82
00:04:22,490 --> 00:04:24,500
there just aren't any buttons on the page,

83
00:04:24,500 --> 00:04:26,110
there's nothing to click.

84
00:04:26,105 --> 00:04:28,975
Then we selected that parent and put a button on the page.

85
00:04:28,970 --> 00:04:32,080
And when we save this and refresh,

86
00:04:32,075 --> 00:04:34,585
we see that nothing works.

87
00:04:34,580 --> 00:04:36,400
Now, that's fine.

88
00:04:36,395 --> 00:04:39,245
If we can move this code below here.

89
00:04:39,245 --> 00:04:42,175
Because this button is now going to exist on the page.

90
00:04:42,170 --> 00:04:45,200
And then we can register the event listener.

91
00:04:45,200 --> 00:04:49,800
And this is going to work. Now, That's not always going to be the case.

92
00:04:49,795 --> 00:04:53,865
There's going to be a lot of times where an event listener is registered.

93
00:04:53,860 --> 00:04:56,400
But then your pages going to dynamically change.

94
00:04:56,395 --> 00:04:57,705
And this is very, very,

95
00:04:57,700 --> 00:05:03,010
very common in modern websites. So what do we do?

96
00:05:03,010 --> 00:05:04,260
Can we use this option?

97
00:05:04,255 --> 00:05:09,235
Lets move this up and let's comment this out so we know that it's not going to work.

98
00:05:09,235 --> 00:05:12,115
So we're now going to select a button and then

99
00:05:12,115 --> 00:05:15,895
onclick and we're going to say when that button is clicked,

100
00:05:16,260 --> 00:05:19,090
console log, this is clickable two.

101
00:05:19,090 --> 00:05:21,010
Now the same problem is going to happen here.

102
00:05:21,010 --> 00:05:22,780
It's going to look for all the buttons on the page.

103
00:05:22,780 --> 00:05:24,730
It's going to try to register an onclick event.

104
00:05:24,730 --> 00:05:26,080
It's not going to work for us.

105
00:05:26,080 --> 00:05:30,480
Let's refresh the page and see that this button every time I click it doesn't.

106
00:05:30,475 --> 00:05:32,395
Okay, so that's no good.

107
00:05:32,395 --> 00:05:36,225
This is nice, clean syntax, this is nice to write.

108
00:05:36,220 --> 00:05:38,790
It's not good enough for dynamic content.

109
00:05:38,785 --> 00:05:42,175
Dynamic content comes in here.

110
00:05:42,270 --> 00:05:47,470
And let's move this up. And so what this is saying is select

111
00:05:47,470 --> 00:05:52,290
the entire document when you click the document and you click the button.

112
00:05:52,285 --> 00:05:55,185
So it could be this particular button in here or

113
00:05:55,180 --> 00:05:58,230
whatever you want to give it an ID or a class or anything like that.

114
00:05:58,225 --> 00:05:59,575
This is your selector.

115
00:05:59,575 --> 00:06:06,465
Then do a function and this is going to make your websites dynamic proof, Ajax proof.

116
00:06:06,460 --> 00:06:09,670
So when things dynamically load on your page using other JavaScript,

117
00:06:09,670 --> 00:06:10,900
this is still going to work.

118
00:06:10,900 --> 00:06:12,990
And so let's go ahead and refresh the page.

119
00:06:12,990 --> 00:06:15,290
And we see this now works.

120
00:06:15,290 --> 00:06:19,210
We registered a click events on all buttons,

121
00:06:19,205 --> 00:06:20,905
but we attach it to the document.

122
00:06:20,900 --> 00:06:23,330
So even if there is something dynamic happening,

123
00:06:23,330 --> 00:06:25,000
we can still execute this.

124
00:06:24,995 --> 00:06:26,425
So this is really good to know.

125
00:06:26,420 --> 00:06:28,070
Tuck this in your back pocket for now.

126
00:06:28,070 --> 00:06:30,350
But we're going to be writing this way moving

127
00:06:30,350 --> 00:06:33,160
forward just because it's a little bit cleaner.

128
00:06:33,155 --> 00:06:39,965
Now what I would like you to do is create an event listener,

129
00:06:39,965 --> 00:06:43,295
something like this. Select a button.

130
00:06:43,295 --> 00:06:44,525
Dot on.

131
00:06:44,525 --> 00:06:47,455
Your first parameter is going to be what are we looking for?

132
00:06:47,450 --> 00:06:48,890
We're looking for a click event.

133
00:06:48,890 --> 00:06:51,890
When you click the button, what happens? Then you write a function.

134
00:06:51,890 --> 00:06:53,480
This is called a callback function.

135
00:06:53,480 --> 00:06:56,020
And anytime you click this button,

136
00:06:56,015 --> 00:06:58,415
what is it going to do?

137
00:06:59,200 --> 00:07:01,370
Go ahead and give that a shot.

138
00:07:01,370 --> 00:07:03,200
Once you are done with that,

139
00:07:03,200 --> 00:07:05,990
let's head on over to the next lesson where we talk about

140
00:07:05,990 --> 00:07:09,500
moving our mouse over an element and off of an elements.

141
00:07:09,500 --> 00:07:11,610
So we're going to hover.