Locked lesson.

Upgrade

About this lesson

What are event listeners, and how to listen for event handlers.

Exercise files

Download this lesson’s related exercise files.

EventListeners.docx
59.2 KB EventListeners - Solution.docx
59.2 KB

Quick reference

Event Listeners

Event listeners are very, very similar to events.

When to use

Events and event listeners are used interchangeably.

Instructions

To add an event listener:

<p id="first">This is my p tag!</p>
<script>
    document.getElementById("first").addEventListener("click", myFunction);
    function myFunction(){ alert("I'm Popping Up!");}
</script>
 

That creates a popup box whenever someone clicks the p tag.

Hints & tips

  • Events and event listeners are basically the same thing
Login to download
  • 00:05 In the last video,
  • 00:06 I talked about events, in this video I wanna talk about event listeners.
  • 00:10 And this can be a little bit confusing to some people, but
  • 00:12 they're basically the same thing, one is just called an event,
  • 00:15 and one is called an event listener.
  • 00:16 So, an event is something that happens, right?
  • 00:19 A user clicks on something, or mouses over something, or a page loads, or
  • 00:23 a form is filled out, or whatever.
  • 00:24 So we looked at a couple of those in the last video.
  • 00:26 But, before those things happen, our program is sort of waiting for
  • 00:30 them to happen.
  • 00:30 It's listening for events.
  • 00:33 And you can listen for events in HTML code, sort of like this.
  • 00:37 Come up here and put in a button.
  • 00:39 We've got this button onclick.
  • 00:41 And when you click on it, it does something.
  • 00:43 So if we save this, hit reload, we have this tiny little button.
  • 00:47 We click on it, boom, Hello, world, right.
  • 00:50 So we can put some text in here.
  • 00:52 We wanna make it a little nicer to see, but you get the picture.
  • 00:56 So, like I said, we've looked at a few of these in the last videos,
  • 00:59 these events, and we can do the same thing here with JavaScript.
  • 01:03 And if we come up here to our script and paste this in, tab this over.
  • 01:08 So we've got var myElement, and
  • 01:10 it's just calling this element, our p element in here.
  • 01:14 Let's tab this down.
  • 01:15 And it's saying onclick do a function, and that function is Hello World.
  • 01:20 So if we save this, come back here and hit reload, now our text, if we click on it,
  • 01:24 boom, we get the same sort of pop up box, alert box.
  • 01:28 So it's a weird distinction to have events and to be listening for
  • 01:31 events, they're basically the same thing and you're going what is he talking about?
  • 01:35 Just roll with it here.
  • 01:36 Another way to listen for events is to use the addEventListener method, and
  • 01:41 if we come done here, and I'm gonna go ahead and delete this stuff.
  • 01:45 And tab this over.
  • 01:46 So what we're doing here is we're grabbing, again, our first ID and
  • 01:51 we're adding in an event listener.
  • 01:53 And that listener is gonna wait for a click and
  • 01:55 when it gets a click it's gonna do my function.
  • 01:58 Now, in the past we called onclick, but
  • 02:00 when you use addEventListeners you get rid of the on.
  • 02:04 So if it was onmouseover, you would instead type mouseover.
  • 02:08 And when it happens, we just get the same thing, do a function, get an alert.
  • 02:13 So if we come back here and hit reload, once again if we click on here,
  • 02:15 boom we get this alert box.
  • 02:17 So really all of these are just basically ways that we can do events and
  • 02:20 some of them are called slightly different things, event listeners,
  • 02:24 addEventListeners, events.
  • 02:26 We can do them in HTML like a button, we can do them with a script,
  • 02:30 using pure JavaScript and functions.
  • 02:33 One thing I will mention real quickly,
  • 02:35 at the end of this addEventListener there's actually a third parameter.
  • 02:37 We have these two parameter that can be true or false, and that's a Boolean.
  • 02:42 When we talked about Booleans a while back and we hardly ever put that on there.
  • 02:46 You really don't even need to know why, I don't know why I'm bothering you with it.
  • 02:49 But just to be complete, you could just know that sometimes there's a true or
  • 02:53 false at the end that.
  • 02:54 If you're interested why, you can research it, but you're not ever gonna need it, so
  • 02:57 we'll just sort of leave it at there.
  • 02:58 But if you are interested, look up event bubbling or event capturing and
  • 03:02 you can read all about that Boolean that goes at the end there.
  • 03:05 Again, you're not gonna need to know about this, but thought I'd mention it.
  • 03:09 So one last thing about events, we can listen for multiple events for
  • 03:13 the same sort of element.
  • 03:14 So if we paste this in here.
  • 03:16 So we have two event listeners here, and
  • 03:18 they're both grabbing the first ID right here.
  • 03:22 And the first one is calling click, and then it runs my first function.
  • 03:26 And the second one is click, and it runs my second function.
  • 03:30 So what happens here is, whenever you click,
  • 03:33 both of these function will get run, and neither of them will be overwritten.
  • 03:37 They're each firing their own function and
  • 03:39 they're not messing around with the other one.
  • 03:41 So like this one doesn't delete this one, or vice versa.
  • 03:45 So you can add as many events per sort of element per ID,
  • 03:49 per whatever, that you want and they'll all play nice together.
  • 03:52 So those are event listeners, I know it's a little confusing.
  • 03:55 Events, event listeners, addEventListener, all the same ways to do the same thing.
  • 04:00 You'll use events a lot in JavaScript, but
  • 04:02 it's mostly onclick and mouseover and things like that.
  • 04:05 So in the next video we'll look at navigating DOM nodes.

Lesson notes are only available for subscribers.

Gift this course