In this lesson, we're going to be applying the JavaScript event listener, so this allows us to create
interaction with the page elements and we've already selected the elements.
And the last lesson and in this case were as we loop through them, we're adding the event listener
method and the one that we're listening for, the event that we're listening for is a click.
And then when it gets clicked, get it to invoke a function.
And I've called this function toggle element.
And right now we're outputting in the console the event.
So whatever gets passed here, the event target and as well as this object referring to the element
that is being referenced here as this.
So you can pause the video and add the event listener to each one of the elements, try it out and see
what gets output in the console.
And I'll walk you through the solution coming up.
And if you do need more information about that event, listener, there's more information available
at the Mozilla Developer Network, so they've got a bunch of examples as well as some of the parameters
that you can set up.
And Passan, so you can also add as an option to only have it clicked once.
So this is a really neat one that I've used several times within projects that allow the Eventless strongly
to fire off one time.
And this also saves you the trouble of having to remove it after it's been invoked.
There's also the use captcha and there's several other options that you might want to apply, depending
on what the need is and how you want to handle the event.
So going into the code, as we're looping through all of the elements, we've got the element as an
elitist object and we can add an event, listener and event listener gives us a choice of the different
events that we can listen for.
And this particular event that we're listening for is called Click.
And then let's create a function that we're going to toggle that element and that's it.
That's all we have to add in order to add the event listener.
And then, of course, we need to create the function that can handle the picking up of the event object.
And we're passing in the event object as a parameter into this function and console like about the contents
of the event.
We're also going to console log out the active object and also lock out the contents of event target.
And I'll show you what the difference is.
And you can also get the elements by using that event target as well.
So there's a number of ways to do this.
Let's check out how this works.
And I clear the console so that when I click any of these, we get this most of it, and it shows all
of the elements.
And the one that we're particularly looking at is that this is actually invoking the full panel.
This is only getting the head because we clicked on the head.
And then also the mouse event is capturing all of this information.
So it also includes the event target, which is the element that was clicked.
And we don't want to use the head because we want to select the panel as the main object.
So going back into the console and it can clear that, see, the one that we want to use and the easiest
one to use is the one that's selecting the entire panel.
So that's the this object is selecting the entire panel because that's the whole active element that
had the event listener on it and that invoked the event.
So the next lesson we're going to make the functionality for the accordion.