Start a free Courses trial
to watch this video
DOM programming relies on events to run your code, like do X when someone clicks Y. In this video we look at how to bind event listeners to your DOM elements.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up[?mellow guitar music?] 0:00 Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com 0:03 DOM Programming - Event Basics with Jim Hoskins 0:07 So far, we've seen how to locate elements in the DOM. 0:13 Now we're going to see how to add event listeners to our elements using JavaScript. 0:16 One of the most important concepts to understand in web development is events. 0:20 Web browsers are inherently event-driven. 0:24 The code that we write isn't constantly running 0:27 while somebody's looking at our web page. 0:29 Instead, each piece of code is assigned to a specific event, 0:31 and when that event occurs, our code is executed. 0:35 Events might be something like somebody clicking on a page, 0:38 hitting a key, submitting a form, 0:42 or it might be non-user initiated actions, 0:45 like when the page is loaded or when a timer has completed. 0:48 The code in our script tags is immediately executed as they're reached by the parser, 0:52 and it's at these top-level blocks of code 0:56 that we set up our other pieces of code 0:59 to respond to various events, 1:01 and this is what makes our page behave the way we want. 1:03 Now, one of the most common things we want to do 1:06 is listen for an on-click event. 1:08 So we have our page here and I'm going to flip over to the code. 1:11 I've created a script tag at the bottom of the page. 1:16 One thing I want to do is I'm going to create a very simple function 1:19 where we're going to call clickListener 1:22 and inside of this, 1:27 it's just going to create an alert box 1:29 that says "I was clicked." 1:31 This is just a very visible alert that we can use. 1:34 So now we actually want to create an event 1:36 that will trigger this clickListener event. 1:39 I don't want the alert to show when the page loads, 1:42 but rather when I click the h1 tag. 1:44 So this is going to be very easy for us to do in its simplest form. 1:47 We're just going to create a var called h1 1:49 so we can have our h1 variable, 1:52 and we use our document.getElementById 1:54 and our our h1 has an id of "headline". 2:00 So all we need to do is assign to our h1 element 2:04 to the onclick property. 2:07 When we assign a function to this property like our 2:10 clickListener, whenever this element is clicked, 2:13 the associated function will be called. 2:18 Now, notice here, I'm not adding parentheses 2:21 because I'm setting the onclick to be the function, 2:24 not the invocation of a function. 2:27 If I were to put parentheses here, 2:29 our function would be immediately executed 2:31 and it would not set up as an eventListener. 2:33 So now any time we click on our element with the Id of "headline" 2:36 we should get an alert saying, "I was clicked." 2:39 I'm just going to save this out and we will refresh. 2:42 So now if I click on the headline here, 2:45 you can see we get an alert message that says, "I was clicked." 2:48 Now, if I click anywhere else on the page, which I'm doing right now, 2:53 I don't get anything, but if click on the h1, 2:56 like right here, it says, "I was clicked." 2:59 And notice since the h1 is a block-level element, 3:01 it actually takes up all the space across the page, not just what's in the Hello World. 3:04 So even if I click over here, we get the same message. 3:08 Now using the onclick, onmouseover, ondoubleclick and other methods 3:13 are a nice and straight-forward way to set up event listeners, but they have a problem. 3:18 We can't easily add 2 different click listeners to the same node, 3:22 because the 2nd one would just overwrite the original one. 3:25 Instead, we should attach event listeners to nodes in a way 3:28 that multiple listeners can be attached. 3:32 Now, the standard way of doing this is using the at eventListener method, 3:35 which will set up something like this. 3:38 So I'm going to keep my same clickListener function 3:41 and I'm still going to grab my h1 element like I had before, 3:44 but instead of using the onclick method, I'm going to use 3:47 the addEventListner function. 3:50 I'm going to type addEventListner, 3:53 and to this I pass the type of event I want to use--in this case, I'm going to do "click" 3:56 and notice this is not onclick, but just normal "click," 4:02 we don't have to prepend onto this, 4:05 and then we pass the function, so I'm just going to pass clickListener, 4:07 and of course, I'm not adding parentheses to the end of that. 4:11 So if we save this out and we refresh, 4:15 and we click on Hello World, we can see, "I was clicked." 4:17 So the advantage of this is if we have a 2nd function, called clickListener2, 4:21 We'll just change the message around here. 4:29 We can now actually add multiple listeners to the same element, 4:31 so I'm going to use this same h1.addEventListener 4:35 and I'm just going to pass the 2nd function. 4:37 So what happens here is if I refresh, 4:39 I click, we see we get the "I was clicked" from our first listener, 4:42 but then right after that, we get our 2nd eventListener. 4:45 So using the addEventListener allows us to add multiple listeners 4:48 to the same method. 4:52 Now, there is a problem, because Microsoft's way of doing this 4:54 is actually a bit different. 4:57 They use a method called attachEvent, 4:59 and when we pass it the event type, it has to be prepended with "on," 5:01 so "onclick" instead of "click." 5:05 So let's look at how we could set up this code. 5:07 I'm going to remove our clickListener2 code right here. 5:10 And so now we need to assign our eventListener 5:16 based on which method we have available. 5:18 So the first thing we're going to do is check h1.addEventListener, 5:21 and I'm just going to see if this property exists. 5:27 If so, we know that addEventListener is supported in this browser, 5:29 and this will be pretty much all modern browsers except for Internet Explorer. 5:32 So we can just set that up, 5:36 and we'll put the code in right here. 5:38 And so now, if we don't have addEventListener, 5:40 we can do }else if(h1.attachEvent){ and if this method exists, 5:42 like it will in Internet Explorer, we can do h1.attachEvent, 5:49 and here we have to do "onclick" instead of just click 5:53 and we can pass our clickListener here. 5:55 Now, finally, if it's a really old browser, 5:58 assigning to the onclick property like we showed before 6:00 will almost always work, so if you want another fallback, 6:05 we can do else { 6:07 h1.onclick = clickListener; 6:10 So now, this has 3 cases for the W3C standard, 6:16 for Internet Explorer, and for everything else. 6:19 So if we do that and we refresh, 6:22 we can see that we can now click our code. 6:25 Now, obviously, just for attaching an eventListener, 6:28 we have pretty much about 10 lines of code right here, 6:32 just to do a very simple eventListener, 6:36 so it makes sense for us to create a function 6:39 to abstract this away from us. 6:42 I'm going to actually clear out all this code, 6:44 and let's paste in a function and see how this works. 6:49 Now, this function is much like our code before-- 6:53 it's just everything's abstracted away into arguments of the function. 6:55 So we'll call bind and we'll pass an HTML element, 7:00 the name of the event, and the callback function. 7:03 We do our normal check if there's addEventListener. 7:06 If so, we addEventListener to the event, 7:09 in which case this might be like click or mouseover or another name, 7:12 and we pass the function. 7:16 Otherwise, you check for attachEvent, 7:17 and here we have to prepend "on" because that's how the API works, 7:19 and we pass the same function, 7:23 and then otherwise, we assign to the "on" = event property and pass the function. 7:25 So now we can do something like this, where we grab our h1 tag 7:30 and instead of doing all this code for each individual call, 7:33 we just call bind(h1, "click" and pass in the function. 7:37 In this case, I just did inline function, 7:42 which we can do 7:44 because we don't need a named function 7:45 to be passed into 3 different methods. 7:47 Instead, we can just inline function here, 7:49 and not need a named function. 7:52 So if we save it out and refresh, 7:54 we can see we now get the "Clicked!" message. 7:57 Up next, we'll be taking a more in-depth look into handling events in the DOM. 8:02 [?mellow guitar music?] 8:07 Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com 8:09
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up