We've got several events that we wanted to add, and we also want to add in a mouse over and a mouse
out of that, as well as the click event.
So there's a few different ways to handle this.
And one of the nicest and neatest ways to do that is to add in all of the event listeners within an
array format so we can list out all of the most listeners that we want to add in.
We want to add in mouse over, mouse out, and also don't forget to click.
So we want to add that one as well.
So looping through all of the items within that array.
So for each or we could have this array separate and have it a name value for the ring and make this
bigger.
So we're looping through all of the items in the array.
So we've got a function and we're passing over that object information.
So item information as a value of E.
So now we can add that value in and as we iterate through all of the array items instead of click,
this is going to match whatever that value of the current object is that we're passing into the function
and that's going to match the value of the current index that were on index item that we've got from
the array.
So it's as easy as that to add in all of these different event listeners.
And now when we refresh you now, when we go over, we're invoking all of the different events, all
going into the starret.
So there needs to be a way to tell what type of event is being invoked.
And we can do that as well by getting the event object that we saw last time represented by E and then
selecting the type.
So now whenever I go over them, mouseover is different, then click as well as mouse out so we can
detect all of these different events that are being handled on each one of these elements.
So what we've done here is essentially we've saved us quite a bit of time because we've loop through
all of the stars.
So there's 50 there's five elements that are that have a star class and then we've added in three event
listeners for each one.
So it essentially saved us 15 lines of code where we had to separate them and add event listeners to
each and every one of them.
So the loops really saved us this time going into here, we're selected our event type.
So let's set up some variables to hold the event type so we can utilize them within our code.
Also, the value of the star.
So the star value.
And this is also a numeric value, I believe, so we don't have to do any conversion, and if we want
to convert it, we could convert that as well.
So essentially, it's getting our star value.
And we also we still have that stars object, we want to loop through all of them and we want to update
some of the properties for them.
So doing for each.
And just as we saw earlier, as we can loop through the elements, we can output some information so
we can output the element as well as we can output its index value.
So as we loop through and this is another loop through, but this is where we need to select those elements
and update some of those properties.
So just to see what that looks like and just to make sure that everything is still working properly,
you see that every time we hover over, we're looping through all of those elements and we're ready
to move on to the next step where we're going to be manipulating those elements.
So that's still to come.
So go ahead and update your event listeners to add in mouseover mouse out and click to the each and
every element with the class of star.