Start a free Courses trial
to watch this video
Events are crucial in JavaScript programming. In this video, we take a look at how jQuery makes handling events a breeze.
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 jQuery - Events: Part 1 with Jim Hoskins 0:08 In previous videos, we took a look at how to select 0:12 and manipulate elements using jQuery, but the real power 0:15 comes from Events. 0:18 In the next couple of videos, we're going to take a look at the utilities 0:20 that jQuery provides for handling events. 0:23 Now, up until this point, we've seen how to select elements and how to manipulate them, 0:26 but those 2 things alone aren't really enough to do anything particularly interesting 0:30 because we need to actually trigger those actions to happen. 0:34 Javascript in the browser is an event-based environment, 0:38 which means that our pieces of code are triggered by certain events. 0:41 For instance, if we want something to happen when we click something, 0:45 there's a click event that will trigger our code to run, 0:48 or if they type something or press a button. 0:51 So all of our code is really triggered by certain events. 0:54 We're going to be looking at the utilities that jQuery offers to make event handling easier. 0:58 In our example, we just have this page with 8 different boxes here. 1:03 We'll take a look at the code. 1:07 We just have this unordered list and each box is a list item, 1:10 and we've give a separate class name to each one 1:13 so we can select them very easily, and they're just floated and styled 1:16 to look like big blue boxes. 1:19 Then, at the bottom of the page, we include our jQuery script, 1:21 and then we have our event script, which is where we'll have our code for this example. 1:24 Let's flip over to this event script. 1:27 We're going to be combining some of the things from the previous lessons, so 1:31 The first thing I want to show you is the .bind() method. 1:35 The .bind() method is called on a jQuery object. 1:38 We're going to start with box #1, so we select it with the class ('.box_1') 1:41 and we can call .bind(). 1:42 Now, .bind() takes 2 arguments. 1:47 The first of which is the name of the event that we want to listen for. 1:49 In this case, we're going to listen for our 'click' event. 1:53 Then, the second argument is a function that will be executed 1:56 when the click event is registered on our element. 1:59 We'll just type an anonymous function() here 2:03 and inside of this function we'll just do something simple, like alert('Clicked Box 1'). 2:06 Flipping back to our code, click refresh, and I'm going to go ahead 2:14 and click on box #1 here--click--and we get an alert. 2:18 So that's pretty simple. 2:23 Let's take a look, and copy this code for box 2. 2:25 This time we're going to look at box 2, and then alert that we Clicked Box 2. 2:29 jQuery gives us a nice shortcut--instead of using .bind() with the first argument click, 2:34 it actually gives us a set of shortcut methods. 2:40 So we can actually just call.click() 2:42 and pass the quick method the single function. 2:48 This quick function is exactly like calling .bind() with 'click' as our first argument 2:51 so to demonstrate that, we'll refresh, and if I click 1, we get clicked box 1,' 2:56 and if we click 2, we get Clicked Box 2. 3:01 Now, let's go down to box #3--so we'll get ('.box_3') and we'll do the click handler again-- 3:10 and let's say we want to actually do something with box 3, like change it's CSS background. 3:18 We'll grab ('.box_3') and call CSS like we did before 3:23 and we'll change the background to '#8C0' 3:30 Click back here and refresh and I'm going to go ahead and click on #3 here 3:39 and now we get a nice green background. 3:44 This function has a special variable called // this 3:47 and // this is the html element that was actually clicked. 3:50 So instead of having to reselect the item, we could actually just pass // this 3:55 to the $ jQuery function and call CSS on it. 4:00 Flipping back and we click again, and we'll see that it has the exact same effect. 4:04 Now, this is particularly useful if our click handler was attached to multiple boxes 4:10 and we needed to know which one was actually clicked. 4:15 We need to wrap it in this jQuery wrapper because 4:19 this is not a jQuery wrapped element--it's just a normal html element. 4:21 So if you want to do anything with jQuery, you need to wrap it in the $ function 4:25 or the jQuery function. 4:29 Let's take a look at another handler we can use, and we'll say ('.box_4') 4:31 and we'll listen for double-clicks, we'll say .bind('dblclick' function() 4:36 and in this one, well call (this), and we'll change the text on it, 4:44 so we'll say .text('Double Clicked'); 4:49 So again, we're just using a different event called Double Click, so this is 'dblclick' 4:54 Flipping back to our page--and we double click #4 here-- 5:00 and we can see that it Double Clicked. 5:04 Double click is another element that has a shortcut function, so instead of calling .bind() 5:07 with double click, we can just call .dblclick 5:10 and pass the function as a singular argument. 5:13 Nnow we've seen how to use .bind() to listen for click and double click. 5:16 In part 2, we'll take a look at some more events that jQuery provides. 5:19 [?mellow guitar music?} 5:22 Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com 5:25
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