Welcome back and congratulations on making it this far into the course.
This lesson is about the event object.
We've seen it a little bit before when we were talking about this, and we're going to cover it in more
detail in this lesson because this is really important.
The event target is the property of the event interface, and it's a reference to the object that dispatched
that.
So whatever item you've clicked on and you've added the event listener on, we can get that event information
and by default, some browsers will actually pass the event object directly within the function, such
as Chrome will do that.
Firefox is a little bit different, so it doesn't by default, pass it in.
So you're going to see that there's differences in the way that the code gets handled.
So the best way to go about it is to pass in the event object and then use that event target, whatever
that element gets clicked and you can see it in action when you add an event listener and you take a
closer look at what's being output and you take the event object by E and then you can see the different
event types so you can see what type triggered it.
And then there's also the event target.
So let's take a closer look.
So first of all, let's select an element and we can use that same button that we use the last time.
So change background color.
Now, of course, obviously, it doesn't have to be a button.
You can use any element that you want and they're all going to work the same way and refresh and just
make sure that we do have that objects.
So adding an event listener, we're going to add a click and just an anonymous function.
And this is where we're passing in the event.
So console log out the event.
Actually, we should do console directory.
So we see that it's a mouse event that's triggered this event and let's see what information we can
capture in here.
So we've got all of the position.
So the client position when it was when that event took place, we have the page position of where that
event object is.
We have the type of event.
So if it's a mouse event, it'll be different.
And in this case, it was a click event, of course.
So we've got the event type there and we also have the event target.
So this is the one that we want to look at, because this is going to also we also have a source element.
So these are the same in this case and to work across all browsers.
So the best one to use is of that target.
And this is actually going to give us access to the element that triggered the event.
And you can see all of the information of that element is contained in there.
So you can use the event target to output the element that triggered the event.
And then, of course, you can do more things with it and find out more information about it.
So if we take our event target, that's going to be always that element that created the event.
And this is also the same as when we saw this before we were using this.
And you can see it's the same thing that gets returned back there.
So if you're applying any type of changes to it, then this is how you can do that.
You can always get that event target information and then utilize that within your code.
So we do have an a challenge in this lesson, of course.
And this is to update our challenge, too, so that you can apply the color changing on different elements.
So add a bunch of different elements to your page and then we're going to add event listeners to those
elements.
And depending on what element gets clicked, that's the one we're going to be applying that random color
change to.
And you can use that same random color function that we generated in the earlier lesson.
So here you can pause the video and I'll walk you through the solution coming up.
Also give you a quick sneak peek at the code.
We've got a bunch of span's here.
So how about we add some additional options into those span's and select those as are elements that
we're going to use?
You can call it spans or you could add in some default device if you want to query selector.
And in this case, it's query selector all as we're selecting all of the elements that are that have
a tag of spane.
And let's also add back in those curly brackets and the round of brackets.
So refresh and make sure that we do have the span's.
So we've got a node list of all the different spans.
And in this case we can do span's for each.
I'm going to loop through all the different elements of selecting the elements and then also the index
if we need to use it.
And as we look through, let's first make sure we've got all of the elements properly in the console,
so output them the elements into the console.
So we do have all of them.
Let's update some of the style properties to them, giving them a padding value.
And also I want to update the background color to them or the border.
So I know this wasn't part of the exercise, but this is going to make it easier for us to spot where
the span's start and where the span's.
And so we've got a bunch of span's and let's take the style and we'll display block for the Spens.
That's what that looks like.
So now we've got them.
All as clear, different spaces, they're bigger now, so we can lot easier see them when we set their
background colors.
So now let's make them clickable.
So as we're looping through, we can add in the ability to click on those those spans.
So let's take the elements, add event listener.
In this case, we'll use a click then anonymous function and we're going to pass in that event object
as e within the anonymous function.
So whenever they get clicked, we can get the E information in the console.
So each one of those, as soon as they get clicked, we get the event information.
And so that means we can also target them.
So now in this format, there's actually a number of different ways that we can select that element
so we can do E target.
There's also a console log L because we've got the element object that we're referencing here as we're
looping through each one of those.
And we can also do this.
So we've got lots of options and they're all going to be the same thing may make this bigger.
And I'll clear this.
And as you see, we click one of them and it's all referencing that same object.
So there's a number of options on how we can select and we can apply properties to this element.
So next to that, we need to do is we need to just update that.
Background, color, and because this is a lesson known event target, let's select that one to apply
the style, background, color, and then we need to recreate our random color function.
So let's do that as well.
We'll create a function for random taking in a number of value.
And then for this, we're going to return random in order to generate the random number and we're going
to multiply it by NUM plus one.
And so this is going to give us a value.
So increment num plus one.
So if we're passing in 255, it's going to bring it to 256.
But the math flaw is going to bring it back down to zero.
So it's going to return back a number from zero to 255.
So that's why we're adding in that plus one.
So you don't always need to do that.
Depends on the type of functionality that you're looking for.
So that's just a return on that.
And next, we need to create another one for the random color.
And this one actually doesn't need to have anything in there because we're just simply returning back
a string value.
So we've got our R.G. and then we're concatenating that random comma, separate these so we get the
right format, concatenating it all together and again, comma, separating and then closing off the
rounded bracket.
And that's going to be the value that we can return.
So now whenever we click these, you see we've got random colors affecting any one of the spans that
we have on the page.
So if we add in new span's, they're going to also have that same effect.
So coming up next, we're going to track key press and key press events.
So that's still to come.