1
00:00:00,150 --> 00:00:06,390
Welcome back in this lesson, we're going to be listening for an event on an element, so creating another

2
00:00:06,690 --> 00:00:07,890
asset within our.

3
00:00:08,460 --> 00:00:12,150
We're going to create a button element and we can just call this summit.

4
00:00:12,150 --> 00:00:15,420
And then when we refresh it, we see we've got added in a submit button.

5
00:00:15,600 --> 00:00:21,980
So the same way that we did last time where we created variables in order to connect to our elements,

6
00:00:22,320 --> 00:00:28,050
we're going to do the same thing using query selector and selecting that button element.

7
00:00:28,060 --> 00:00:32,300
And if you do have more than one with the button tag, they can be more specific.

8
00:00:32,310 --> 00:00:35,190
You can add in a class or you can add in an idea.

9
00:00:35,310 --> 00:00:38,240
And there's a number of different ways that you can make these selections.

10
00:00:38,250 --> 00:00:46,470
So if you are selecting by a class and we'll give this class A button, a B10 class, I can also select

11
00:00:46,470 --> 00:00:48,590
via the B10 class.

12
00:00:48,840 --> 00:00:49,920
So it actually doesn't matter.

13
00:00:49,920 --> 00:00:56,790
I'm able to make the selection and if we have more one more than one element that meets the criteria,

14
00:00:56,880 --> 00:01:00,600
if we have more than one button, it's going to simply select the first one.

15
00:01:00,870 --> 00:01:05,460
So even if we have more than one, you're going to see what happens here.

16
00:01:05,460 --> 00:01:09,570
When I type in BTE and we're always going to be related to the first one.

17
00:01:09,720 --> 00:01:12,610
And that's the one that's getting highlighted right now within Chrome.

18
00:01:12,930 --> 00:01:18,750
So see, and if we do want to make a selection on a button and if it's not the first one, then again,

19
00:01:18,750 --> 00:01:25,010
we do need to be more specific and we need to have a way to differentiate the content within the buttons.

20
00:01:25,320 --> 00:01:29,510
So now that we've connected the button, let's add an event listener to that button.

21
00:01:29,520 --> 00:01:34,770
So selecting the button object, add event, listener and event that we're going to listen for is a

22
00:01:34,770 --> 00:01:35,100
click.

23
00:01:35,100 --> 00:01:41,760
So we need to specify the event and then also we add in a function that's going to handle that event.

24
00:01:42,060 --> 00:01:47,290
So right now, within the function, we can simply console log out and we can type in click.

25
00:01:47,310 --> 00:01:53,370
So now when we go and we refresh the page and we hit submit, you can see that our output in the console

26
00:01:53,370 --> 00:01:54,300
is click.

27
00:01:54,510 --> 00:02:01,230
So if we can take this one step further as well and we can output this and what this will be, this

28
00:02:01,230 --> 00:02:09,840
will represent the element that made the event fire off, so activated the event on this particular

29
00:02:09,840 --> 00:02:10,350
element.

30
00:02:10,480 --> 00:02:15,570
So it's representing the current button that made the click so we can check to see some of the button

31
00:02:15,570 --> 00:02:16,230
contents.

32
00:02:16,410 --> 00:02:21,030
We can get class and we can get this this object information this way.

33
00:02:21,270 --> 00:02:25,650
And as well, this is going to be the same thing as BTE, an object.

34
00:02:25,660 --> 00:02:28,910
It's going to represent the same item within the dorm.

35
00:02:29,160 --> 00:02:34,140
So if I refresh and if I do this, you're going to see that both of them are the same.

36
00:02:34,140 --> 00:02:36,480
They're representing the same object within the dorm.

37
00:02:36,510 --> 00:02:41,840
We also have an event option that we can track within the event listeners as well.

38
00:02:42,150 --> 00:02:49,410
So if we output this and we output event, this is also going to represent the element that triggered

39
00:02:49,410 --> 00:02:49,950
the event.

40
00:02:50,130 --> 00:02:56,610
But it's going to also have some additional information so we can see the element that provided the

41
00:02:56,880 --> 00:02:59,630
source the target, which was the button.

42
00:02:59,820 --> 00:03:06,780
So if we did event target, that's going to actually represent that same element that initiated the

43
00:03:06,780 --> 00:03:07,890
event to fire off.

44
00:03:08,190 --> 00:03:13,860
So there's multiple ways in order to get the information and using the event object, this gives us

45
00:03:13,860 --> 00:03:19,680
some additional information on the event itself as well as we can navigate to the target.

46
00:03:19,860 --> 00:03:26,730
We can use this to simply get the target of whichever element triggered the event, or we can use our

47
00:03:26,730 --> 00:03:30,570
B10, which was the way that we made the selection of the object.

48
00:03:30,900 --> 00:03:35,670
So now that we've got an event listener, we want to make something happen and that's coming up in the

49
00:03:35,670 --> 00:03:36,420
next lesson.

50
00:03:36,570 --> 00:03:38,670
So go ahead and add in your event listener.

51
00:03:38,970 --> 00:03:47,760
And coming up, we're going to select the the input and output, the value of the input into the select

52
00:03:47,760 --> 00:03:48,170
element.

53
00:03:48,510 --> 00:03:54,300
So what's going to happen is when I hit submit, the div content will update to Lowrance and I'll show

54
00:03:54,300 --> 00:03:56,070
you how to do that in the upcoming lesson.