This is where the fun begins, because we get to create interaction on elements within our page by adding
event listeners to those elements, and the way that you can do that is you select your event, you
select your target element, and you can add event listener method to that element.
And there's, of course, some examples here of the Mozilla developer network.
So take a quick look at those.
So the syntax is the target.
So this is the element.
And then using the dot and method, you need to select the type of event that you're adding for the
listener.
You need to specify what's going to happen, what the blockquote is or the function that's going to
get invoked once that event gets fired off.
There's a few other options as well, which we're going to be discussing.
There's some examples here of how to add that that list.
And you can also remove that listeners as well.
So attaching the event listener to the element and then removing the event listener as well.
So it's another option when you are selecting and adding events.
There's a lot of different types of events such as Mossop and most commonly, of course, is the click
event.
So you probably heard of those ones.
So we can add events to any one of the elements on the page, opening up the editor.
First, we're going to select the elements.
We're going to select that each one again using document and this time will do get element by ID, refresh,
make sure that we do have that element as an object so we are able to select it.
So let's add a click event to that element.
So all we to do is specify the element as an object, add event, listener and event that we're adding
in is a click event and then the function or the block of code that we want to invoke and run when it
gets click.
And for now we're just going to output into the console.
We're going to just say click so we refresh it.
Now, whenever we click on that element, let's this one here that says this is the first div and we
see that the function is invoking the block of code and we're outputting the console information.
There's also another option that you might see occasionally where you've got another comma in here and
you're going to see there a boolean value.
So either a true or false.
So what this is this is for the capture.
And if it's true, the events execute top to down in the capture phase.
And when it's false, it does the bubble bottom to the top.
And so right now, with the newer versions of JavaScript, that is an option.
So you don't have to include it.
And it's not specified.
The use captured defaults to false.
So that's a way to specify which order the click.
So if you have multiple elements inside of other elements, it helps you determine the order which those
events are going to get invoked and fired off.
So also another way to add the event listener so you can do add event listener and let's do another
one here where we've got a click and you can also in a function and then create the function and will
console log and this would be H1.
So let's refresh.
And now you see that both of those events are being invoked.
Let's take a closer look at that object.
And when you do the console director of the H1 object and open it, you can see within the console options
for different events.
So these are all the different types of events that we can have.
We can have CLECs, we can have change.
We can have double clicks and key downs, key presses.
So you have two different options and notice as well when you do add in the function that we're not
invoking the function because it's expecting a function parameter.
So that's why we've got the function in there as an anonymous function or we can call to a named function.
So there is a challenge, of course, for this lesson.
And that's the add the ability on elements with the class of list item and toggle, the class read of
the element when it gets clicked.
So we want to make adding event listeners to all of those and then making them clickable when it gets
clicked the second time.
So that's the toggle effect.
So go ahead, pause the video and I'll walk you through the solution coming up and make a quick update
to the HTML document that we've been using.
We've added in a bunch of list items that have a class now of list item and there are some that have
links still.
But they're not they don't they're not going to be included in this list because they don't have list
item attached to them.
So going into the JavaScript, the first thing that we want to do is create that element list so that
we can iterate through them because we want to make them all clickable.
And that's where we're going to use the query selector, all in order to make the selection, selecting
all of the elements that have list item as a class.
And then we can loop through all of the elements using typical for loop where we're looping through
while the element lists, while X is less than the element list length.
And then we're just incrementing X so that we can go through the list.
And I want to console log out that element list item as we iterate through the list so we get them all
listed and I'm going to add something so that they're more visible so I can update their style properties
to give them background color of yellow so that we can see them a little bit better.
And also, as we're iterating through, I want to update the style and add in some padding so we can
separate them out from the rest of the element.
So now we've got all of the ones that are yellow are all the clickable ones.
So that way we can see them visibly and you don't have to do that.
But it's just one way that while we're going through the exercise, we could add that in and we could
update it via JavaScript so we can see it better.
So now it comes to the adding the event listener and the event listener that we're adding is is a click.
So we're listening for a click and we're going to include a function that says make it red and that's
it.
And then just go down and create that function.
You could have also done it as an anonymous function.
So that was an option as well and will console log through that element.
And this is a great, great opportunity to take a look at this keyword, this in JavaScript.
And what that does is that actually is going to refer to the element.
So when I click it and if I clear this out, you're going to see that it's going to it's referring to
the existing element.
So there's a number of different ways to access that element.
So if we wanted to, we could pass it in as well.
But it already is existing within this.
So we know that once we can access this, then we can select it and we can toggle the class.
So we've got classless.
So this is from before and toggle and we're going to toggle the class of red, also going to logout
temp.
And as we saw before that there is a return value there.
So there is a return boolean value.
So we see the first time we click it, it's true.
Then it goes false, true, false.
I'll make it a little bit bigger so it's easier to see.
So any one of these elements, you can see that when I do click on them, the font goes red because
it's adding in that red class.
And you can see that within the element what's being listed out.
So you've got list item red is being listed in there.
So there's a number of solutions here as well as you could have done an anonymous function as well.
So that was another opportunity that you could do and you could list it out.
And then as we're selecting that element, so this is also going to refer to the same element.
And we could do a class list toggle and we can have that same effect here so we can add and remove the
red class to them.
So that's going to do the same thing, same effect, except, of course, we're not outputting to the
console.