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 its 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 scrollbar, 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
Lets 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, its 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 doesnt 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 );
Lets 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.
$('img').click( function() {
$(this).css('border','solid');
//why this??
$(this).css('border-color','red');
});
Finally, we would probably place this code inside our [Link]() 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 [Link]()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').click( function() {
$('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.
Dont 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:
[Link] with the click() function, the argument to mouseover() is frequently an
anonymous function.
[Link], we use this. Otherwise, when you move a mouse of any ONE h3 item, then
EVERY h3 item would become red.
[Link] is usually the case, this code should probably be placed inside the
[Link]() function so that it will kick in as soon as the page has finished
loading.
POP-EXERCISE: Once youve 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 youve 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 [Link]()
Just to illustrate/remind you, there is nothing wrong with having lots of different functionaity
written into your [Link]() 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 [Link]()
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 doubleclicks. 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, youll 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.
