1
00:00:00,330 --> 00:00:05,970
We've got several events that we wanted to add, and we also want to add in a mouse over and a mouse

2
00:00:06,150 --> 00:00:09,440
out of that, as well as the click event.

3
00:00:09,480 --> 00:00:11,310
So there's a few different ways to handle this.

4
00:00:11,610 --> 00:00:17,370
And one of the nicest and neatest ways to do that is to add in all of the event listeners within an

5
00:00:17,370 --> 00:00:22,910
array format so we can list out all of the most listeners that we want to add in.

6
00:00:22,920 --> 00:00:27,920
We want to add in mouse over, mouse out, and also don't forget to click.

7
00:00:27,930 --> 00:00:29,750
So we want to add that one as well.

8
00:00:30,270 --> 00:00:33,840
So looping through all of the items within that array.

9
00:00:33,870 --> 00:00:40,110
So for each or we could have this array separate and have it a name value for the ring and make this

10
00:00:40,110 --> 00:00:40,460
bigger.

11
00:00:40,740 --> 00:00:43,180
So we're looping through all of the items in the array.

12
00:00:43,560 --> 00:00:48,020
So we've got a function and we're passing over that object information.

13
00:00:48,030 --> 00:00:50,430
So item information as a value of E.

14
00:00:51,270 --> 00:01:00,240
So now we can add that value in and as we iterate through all of the array items instead of click,

15
00:01:00,540 --> 00:01:06,210
this is going to match whatever that value of the current object is that we're passing into the function

16
00:01:06,420 --> 00:01:11,880
and that's going to match the value of the current index that were on index item that we've got from

17
00:01:11,880 --> 00:01:12,340
the array.

18
00:01:12,750 --> 00:01:16,500
So it's as easy as that to add in all of these different event listeners.

19
00:01:17,040 --> 00:01:24,540
And now when we refresh you now, when we go over, we're invoking all of the different events, all

20
00:01:24,690 --> 00:01:26,250
going into the starret.

21
00:01:26,700 --> 00:01:31,290
So there needs to be a way to tell what type of event is being invoked.

22
00:01:31,290 --> 00:01:37,530
And we can do that as well by getting the event object that we saw last time represented by E and then

23
00:01:37,530 --> 00:01:38,460
selecting the type.

24
00:01:38,850 --> 00:01:46,200
So now whenever I go over them, mouseover is different, then click as well as mouse out so we can

25
00:01:46,200 --> 00:01:51,780
detect all of these different events that are being handled on each one of these elements.

26
00:01:52,080 --> 00:01:57,060
So what we've done here is essentially we've saved us quite a bit of time because we've loop through

27
00:01:57,060 --> 00:01:57,990
all of the stars.

28
00:01:58,200 --> 00:02:04,410
So there's 50 there's five elements that are that have a star class and then we've added in three event

29
00:02:04,410 --> 00:02:05,670
listeners for each one.

30
00:02:05,850 --> 00:02:11,790
So it essentially saved us 15 lines of code where we had to separate them and add event listeners to

31
00:02:11,790 --> 00:02:12,770
each and every one of them.

32
00:02:12,990 --> 00:02:19,940
So the loops really saved us this time going into here, we're selected our event type.

33
00:02:20,490 --> 00:02:26,470
So let's set up some variables to hold the event type so we can utilize them within our code.

34
00:02:27,000 --> 00:02:29,490
Also, the value of the star.

35
00:02:29,610 --> 00:02:30,870
So the star value.

36
00:02:32,010 --> 00:02:38,520
And this is also a numeric value, I believe, so we don't have to do any conversion, and if we want

37
00:02:38,520 --> 00:02:40,350
to convert it, we could convert that as well.

38
00:02:40,890 --> 00:02:43,440
So essentially, it's getting our star value.

39
00:02:44,560 --> 00:02:51,460
And we also we still have that stars object, we want to loop through all of them and we want to update

40
00:02:51,460 --> 00:02:52,960
some of the properties for them.

41
00:02:52,960 --> 00:02:54,340
So doing for each.

42
00:02:55,120 --> 00:03:00,850
And just as we saw earlier, as we can loop through the elements, we can output some information so

43
00:03:00,850 --> 00:03:05,610
we can output the element as well as we can output its index value.

44
00:03:06,280 --> 00:03:12,550
So as we loop through and this is another loop through, but this is where we need to select those elements

45
00:03:12,550 --> 00:03:14,270
and update some of those properties.

46
00:03:15,310 --> 00:03:19,780
So just to see what that looks like and just to make sure that everything is still working properly,

47
00:03:19,990 --> 00:03:25,750
you see that every time we hover over, we're looping through all of those elements and we're ready

48
00:03:25,750 --> 00:03:29,360
to move on to the next step where we're going to be manipulating those elements.

49
00:03:29,590 --> 00:03:30,670
So that's still to come.

50
00:03:30,970 --> 00:03:38,620
So go ahead and update your event listeners to add in mouseover mouse out and click to the each and

51
00:03:38,620 --> 00:03:40,750
every element with the class of star.