Events Part I Mouse Events

Learning Objectives By the end of this lecture, you should be able to: Understand what is meant by an ‘event’ Appreciate that events are being constnantly generated (“fired”) behind the scenes Comfortably write simple code to respond to some basic mouse events

JavaScript and Interactivity Perhaps the most powerful and popular feature of JavaScript is it’s ability to make web pages ‘interactive’. By interactive, we mean that the web page can somehow respond to users’ behaviors. You have all seen many of these in action already, though you probably were not thinking about what was going on ‘under the hood’: Moving a mouse over a button causes the button to change color and a menu to drop down. Moving a mouse over an image causes the image to pop out in a miniature temporary window. When you move the mouse off of the image, the mini-window disappears. Checking a checkbox causes a form to be submitted and a small ‘Thank you’ box to be displayed before fading out. Etc, etc EVENTS: Even though you may not be aware of it, events are occuring constantly as you visit a web page. Every time you move the mouse over something – even something completely static such as a paragraph of text – an event object (called ‘mouseover’) is generated behind the scenes. Every time you click on something, an event object (called a ‘mouseclick’) is generated behind the scenes. Every time you double-click on something, an event object (called a ‘doubleclick’) is generated behind the scenes. Every time you resize a window, an event object (called a ‘resize’) is generated behind the scenes. Same thing with key presses, windows being closed, new windows opening, moving a scroll-bar, and many, many others. Because web browsers automatically generate these event objects in response to certain things happening, we can write code to monitor for these event objects and then react to them when they occur.

Intro to Mouse Events Let’s begin with the all-important mouse click. When you click a mouse anywhere on a web page (it does not have to be over an image or hyperlink), the web browser notes that a “click event” has occurred. As we have mentioned, a user clicking their mouse results in a ‘mouseclick event’ being generated. In fact, it’s even more detailed then that. The browser will actually generate several events in response to what you and I may think of as a simple click of the mouse. A mouse click will certainly result in a ‘mouseclick’ event being generated, but it will also result in each of the following events being generated: Mouse Down event Mouse Up event Mouse Move event If we wanted to, we could have our scripts react to every single one of these events. Because there are SO many different events being generated every second, it only makes sense to write code that will respond to the particular events we are interested in. Perhaps you are starting to see how these events can be used to make a page more interactive. For example, you might have a page with a series of images on it. You could then write some code so that whenever the user hovers over an image and presses the mouse button down (but doesn’t let go), the image is increased in size and a highlighted border appears. In other words, you would write the code to respond to a ‘mousedown’ event. Then when the user releases the button (the ‘mouseup’ event), you might write code that responds to that particular event by causing the image to be resized back to its original size and the highlighted border to be removed.

MouseEvents contd: The click() function Recall that whenever a user clicks a mouse on your page, the browser generates several events, one of which is a ‘mouseclick’ event. In order to respond to a mouseclick event, we invoke a jQuery function called click() . EXAMPLE: Suppose we wanted to cause an image to have a red border when a user clicks on it. The first step is to add the click function to our image selector: $('img').click(); Simple enough… However, the key to making all of this work is the code that we provide as the argument to the ‘click()’ function. We provide this code using our new friend: the anonymous function. $('img').click( anonymous function goes here ); Let’s set up our anonymous function. Remember that we always start with the outline ONLY in order to ensure that all of our parentheses and braces, etc are correctly set up: $('img').click( function() { }); //closes the anonymous function, and then the ‘)’ of the click() function Once our outline is carefully and correctly done, we can go ahead and write the code for our anonymous function. $(this).css('border','solid'); //why ‘this’?? $(this).css('border-color','red'); }); Finally, we would probably place this code inside our document.ready() function. That way, as soon as the page loads, this command would also be loaded. Now, whenever a person clicks on an image on the page, a red border will appear. TRY IT: Download ‘page_of_stuff.htm’ from the class web page (along with the various images) and add the code above block of code inside the document.ready()function.

Pop Quiz Question: In the previous example also shown here, why should we use the ‘this’ keyword to modify the image? Why not simply use ‘img’ as the selector for the modifications? $('img').click( function() { $(this).css('border','solid'); $(this).css('border-color','red'); }); Answer: Had we used ‘img’ as our selector for the modifications like so: $('img').css('border','solid'); $('img').css('border-color','red'); then when the user clicked on an image, ALL of the images on the page would have been given a red border. By using ‘this’ we are notifying jQuery that whenever an image is clicked, only that particular image (i.e. the image that generated the event) should be modified. As always…. Don’t just VIEW it……. TRY IT!!!

‘mouseover’ and ‘mouseout’ events Whenever you move a mouse over an item, a ‘mouseover’ event is generated. So if you wanted, say, any ‘h3’ tag on the ‘page_of_stuff.htm’ page to change color to red when you move a mouse over it, you could use: $('h3').mouseover(function(){ $(this).css('color','red'); }); NOTES: As with the click() function, the argument to mouseover() is frequently an anonymous function. Again, we use ‘this’. Otherwise, when you move a mouse of any ONE h3 item, then EVERY h3 item would become red. As is usually the case, this code should probably be placed inside the document.ready() function so that it will kick in as soon as the page has finished loading. POP-EXERCISE: Once you’ve tried the above code (you DID try it, right??), use the corresponding mouseout() function to return the color back to ‘black’. The idea is that when the user moves the mouse over an h3, the text will turn red, but when they move the mouse off of the h3, the text will return to black. Again, feel free to use the ‘page_of_stuff.htm’ page to do this exercise since there are a couple of ‘h3’ tags on it. The solution is on the next slide. But DO NOT look at the solution until you’ve made a genuine attempt to figure it out on your own. Feel free to look at any of the examples up to this point to help you.

Pop-Exercise solution The easiest answer is to simply write a second function for ‘mouseout()’ that will return the ‘h3’ text to black: $('h3').mouseover(function(){ $(this).css('color','red'); }); $('h3').mouseout(function(){ $(this).css('color','black');

Quick review of document.ready() Just to illustrate/remind you, there is nothing wrong with having lots of different functionaity written into your document.ready() function. For example, all of the functions described so far in this discussion can be included like so: $(document).ready(function() { //make all images 50x50 pixels $('img').attr('height','50px').attr('width','50px'); $('h3').mouseover(function(){ $(this).css('color','red'); }); $('h3').mouseout(function(){ $(this).css('color','black'); $('img').click( function() { $(this).css('border','solid'); $(this).css('border-color','red'); }); //end document.ready()

Other mouse events There are a series of other mouse events that you can look for and respond to. A few additional useful or interesting functions are listed here. Only a brief description is given. Refer to a reference to find out more about the particulars of each. Of course, the jQuery API will give you all kinds of information, example, and opportunity to practice. dblclick(): Whereas click() responds to mouse clicks, dblclick() responds to double-clicks. However, double-clicking is not common behavior on web pages. Therefore, writing code to respond to double-clicks should only be used in special situations. mousedown(): This event is generated whenever the user presses the left (on a regular mouse) button down and remains active until they release the button. The most common use for this function in the real world is for dragging items around a page. mouseup(): Not surprisingly, this event is generated whenever the user releases the mouse button. mousemove(): This event fires whenever a mouse moves around the page – even if no button is being pressed. In other words, this event is being continuously fired. Do NOT have an alert pop-up on mouseove() !! Otherwise, you’ll get hundreds and hundreds of alert boxes as you move the mouse around your page! This event is sometimes used to keep track of exactly where the mouse is on the page at a given moment. It is not a commonly used function. In fact, if you go to the API, you will see an entire category called 'Mouse Events' that you can read up on. Remember that learning to program is a ‘hands-on’ endeavor. That is, the only way to really get the hang of concepts, to reinforce them, and to unmask things you may have missed is to TRY THE CODE! So be sure to experiment with these at least briefly before moving on.