7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 7Length: 36 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 JavaScript Event Handling

Let’s now look at how to handle simple “click events” using plain JavaScript instead of jQuery.

Useful Links

2.4 JavaScript Event Handling

Hello and welcome back. We've started weeding out a lot of our jQuery, and now our activate question method here is completely free of jQuery. So this is all pure JavaScript, and so we've done a good job so far with that. But now I wanna move down to this section, where we have a couple of click events. So we have our heading click event, which is when we click on any of the headings for our panels here. And then we have the btnCollapse click event, which is for this Collapse All button up here at the top. So we're using the on method in jQuery to create these click events, we could also do it using the click method. There are a couple of different ways that jQuery offers but we wanna get away from jQuery, so we're gonna do this with plain JavaScript. So let's start with the simple one, the btnCollapse. All we're gonna do here is hide all of the existing answers, all of the bottom sections of these panels. So again, if we go up to the top of JavaScript you can see that we've already created a new variable that's using just JavaScript instead of jQuery, and that's btnCollapse without the dollar sign. So before we get started here, let's go ahead and create a new version of this. You can find our starting code pinned here in the course notes for this lesson. Once you've opened that up, I'm gonna click on Fork to create a new version, and all of our changes will be saved in this new version. So we've got our btnCollapse variable here, let's go down to the bottom, and let's duplicate this click event using plain JavaScript. So I'm gonna skip a couple of lines here and I'm gonna point to our btnCollapse variable that does not have the dollar sign at the beginning. So this is the one we created with plain JavaScript, and the way we create an event listener on an item, on an element. Now remember, first of all this btnCollapse element was retrieved by using getElementById, so we know that there's only one of these. So we can apply the EventListener directly to this variable because this variable represents one single item. It's gonna be a little bit different when we apply these to the headings. Because these headings, this heading variable stores multiple items, so we're gonna have to treat it like an array and we're gonna have to loop through it. But for our collapse button here, we used to get element by ID, so we know that we can just apply the EventListener directly to this variable. And I should also point out, that even if you only have one of these panels here, if you access that panel using getElementsByClassName instead of getElementById, then you're still gonna have to do a loop. Or you're still gonna have to at least point to the very first item in that array, even though that array only has one item in it. But anyways, let's talk about the collapse button, again this is just pointing to a single item. So we can point to btnCollapse., and then the method we're looking for here is called addEvent with a capital E, Listener with a capital L. And then inside the parenthesis here we need two things. The first thing we need is the event that we're listening for, which in our case is click. So inside quotation marks here, I'm gonna type in the work click, comma, space, and then we would type in the name of the function. So let's say that we created a function called btnClick, we could put the name of that function here or, we could just put the entire function here. So we could just type in the word function, open and closed parentheses, open and closed curly brackets. And then will nudge that closing curly bracket down a couple of lines and put a semicolon at the end of that statement. So as you can see, this looks almost identical to our click event up here, the only difference is we're using addEventListener instead of on. Now we could also put an event variable inside our function here and we usually just call that E or event, you can call it whatever you want to really. But whatever you put there, it's going to put the past event information into that variable that you can then access inside the function. And that's one way you can access the item that you clicked on, you could point to e.target and it would point again to this button collapse, this button that we clicked on. We don't need that here because when we click on this button, we don't care about what we clicked on, we care about all of these answers. We wanna collapse or hide all of those answers as we did right here using jQuery. But remember, there are multiple answers here, so we can't just point to something and hide it and say we need to loop through that array of items and hide it that way. And we've already created code for that, Here, where we're looping through the answers and then setting the display property to none. So what we can do is we can just copy that code, that for loop inside the activate question method. Come back down here to our EventListener and paste. And here we're doing the exact same thing we've done before, we're looping through all of our answers and setting the display property to none, whenever we click on that collapse button, so let's see if that works. We'll click on Collapse All and we don't know for sure if this works, because we still have this old click event here, let's get rid of that first. And then let's try it again, so our page refreshes, our first active item shows up again, let's click on Collapse, there we go. We see that it still works just fine, and then we can go through and start clicking on our individual items again. So that's again how you would create an event listener for a single item. Again, this single item was pulled in using getElementById. But our heading, as I mentioned a second ago, are gonna be a little more complex because we're going to have to loop through those headings in order to add an EventListener to each individual item. Because in plain JavaScript you can't add EventListeners to a whole group of items or a whole array of items at the same time. So just after our heading click event, let's skip a couple of lines, and let's create a for loop. So we're gonna create a variable called i, set it equal to zero. We're gonna look through as long as i is less than heading.length. So the number of heading items, that's how many times we're gonna loop through this, and then we're going to increase the value of i by 1, and then we have our opening and closing curly brackets there. So now as we loop through, we can add an Eventlistener to each individual item. So we're gonna point to heading, and then in square brackets we'll point to i, which again is this variable we created up here, and we're gonna add an EventListener to that. So addEvent with a capital E, Listener with a capital L, and again we're doing a click event. So inside the parenthesis and inside quotation marks I'm gonna type in the word click, and then after the closing quotation mark, comma, space, and we'll create our function with our E variable inside that, and there we go. So there's a little bit more we're gonna do inside this EventListener obviously, we haven't done anything inside that EventListener yet. But I don't wanna get into that in this lesson, instead I just wanna check and make sure that this click EventListener is working. So what I'm gonna do is I'm gonna create an alert that says clicked, and that's all we need for now. So when our page refreshes, we can click on this, and sure enough we get an alert that says clicked, and we need to get rid of our first click event. And instead of deleting it, I'm just going to comment it out, because we're gonna need to look at this code in the next lesson. So I'm gonna highlight all of that, and then I forget what the shortcut is, so I'll look at my shortcuts. Toggle BlockComment is Ctrl+Shift+/ sometimes that doesn't work, so let's see if it does. Ctrl+Shift+/, and it did not work, so I'll just do it manually, and we've got that commented out now. So again, in the next lesson we're gonna jump into this EventListener, and we're gonna take a look at this parent method as we work through the jQuery that was in our old click event for that item. So thank you for watching, and I'll see you then.

Back to the top