jQuery Tutorials
Getting Started / Handling Events
Subtitles of the Movie (jQuery / Getting Started / Handling Events)
Now it's time to get into the interactive side of jQuery. Let's take a look at the basics of event handling. One of the most common events you will want to handle, is when a user clicks on something. Create the HTML document above or refer to the included 4.1.html file. Line thirteen is a simple DIV with the ID with div one displaying the text, click me. Note that the contents of the style attribute on this line are just for decoration and it does not effect the functionality we are demonstrating. But it does help that we have set the cursor to pointer which helps inform users that they are hovering over a clickable object. The interesting part comes in on line sixteen. Here we use the DIV one ID Selector and add the click handler. This contains an anonymous function which just displays an alert box with a greeting. Go ahead and try it out in your browser. When you click the DIV it displays a JavaScript alert. The double click function works exactly the same way. Go ahead and modify the document you created in the last step to use double click instead of click and test it out in your browser. These functions are extremely easy so we won't dwell on them too long and we'll get to more functions, but feel free to pause the lesson to experiment with click and double click on your own if you like. Okay now let's make things interesting with hover events. Create the code shown here and as shown in the file 4.2.html. Note the style definition on line ten which sets the cursor for any list items to a pointer and the unnumbered list on line seventeen. On line 25 we add the hover event handler to any HTML list item on the page. On line 27 we use the jQuery append function to append some html to the end of the LS contents contained in a span tag. Note the use of the keyword this, on this line. In this context, this refers to the item that was not only specified in the Selector, but specifically the current item triggering the function. The code on line 30 finds the last span element on the page and removes it. Looking at this page in our browser shows that we have added a hover effect to the list items which displays a pointer to the right of the text and it disappears when we hover away from the item. Now I want to stop to take a closer look at how this block of code is constructed. For anyone new to jQuery one of the more daunting aspects can be the confusing nested parenthesis and curly brackets. So I have tried to space the code out here clearly so that we can examine and understand what is going on. Look at line 25, this is the start of the hover function with the opening parenthesis at the end of the line. The closing parenthesis for this function is all the way down at the bottom on line 32 which explains why we see the block of code ending with the apostrophe. At first this may appear odd, as the code would at a glance appear to be constructed like a function definition that would normally end in a curly bracket but we're actually just looking at the closing parenthesis of a single function call. The hover function takes two parameters. The first one is the action to perform when the mouse enters and the second parameter is the action to perform when the mouse leaves. Now look at line 26, this function is actually being passed as the first of two parameters to the hover function. In this case the edit span tag in HTML. The comma on line 28 indicates that the second parameter will follow, which is the function beginning on line 29 and ending on line 31, which is what makes the span tag disappear. No comma follows this function on line 31 because it is the last of the two parameters. Now, let's look at the demonstration of mouse down and mouse over events in the file 4.3.html. Line ten contains a style sheet class called red box and line 21 contains a DIV with the ID reading. The mouse down function adds the class red box to our DIV and the mouse up function that follows removes that class. Go ahead and try this out in your browser to see how it behaves. Next up is the toggle function. This very useful function is demonstrated in the file 4.4.html and the code shown here. Again we have our div ID reading on line thirteen but the interesting stuff starts happening on line sixteen. Similar to the click function, toggle takes two parameters and an optional third parameter which we demonstrate here. Each function passed to the toggle function will determine what happens each time we click. On the first click we use the CSS function to turn the text blue, on the second click red, and on the third click, the text will turn green. On the fourth it will cycle back around to blue. To be thorough, here are some other event handlers that you can experiment with. Mouse enter, mouse leave, mouse out and mouse over all have functionality obvious to their names. I have asterisks next to mouse move, because this one detects the detailed position of the users cursor and we'll demonstrate some very exciting applications later in this course that use this. The focus in and focus out functions apply especially to use with form elements which we will also cover in detail with practical applications.
Tutorial Information
| Course: | jQuery |
| Author: | John Fontana |
| SKU: | 34277 |
| ISBN: | 978-1-61866-020-6 |
| Release Date: | 2011-11-18 |
| Duration: | 7 hrs / 102 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
