jQuery Events
by Marc Plotz
October 13, 2009
|
Explore the world of jQuery Events and change the way you
write JavaScript forever.
|
Introduction
Last week I wrote a little about jQuery, I explained
where it comes from and how to use it to create sortable,
collapsible and even Ajax content-loading Tabs, as well as a
simple accordion. You can see this article HERE. If you
have looked a little further into jQuery since reading that,
you will have surely realized the power of jQuery by
now.
If you need a little more convincing, lets consider the following.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<a href="http://wdvl.com/">WDVL</a>
</body>
</html>
Code Example 1
Above we have a simple test page for a jQuery case. Now,
let's start by recalling how we would make a pop-up in
traditional javascript. Ordinarily, we would say:
window.onload = function(){ alert("welcome"); }
Code Example 2
The problem with the above code, though, according to
John Resig, the founder of jQuery, is that this code is not
run as the page loads, but rather only after all the images
in the document have completed loading (including
banners!).
Instead, Resig came up with the READY EVENT,
a simple statement that checks the document and waits until
it's ready to be manipulated. As you use more and more
jQuery you will realize that just about everything of
importance JavaScript-Wise, happens in the READY
EVENT demonstrated below.
$(document).ready(function(){
// jQuery Stuff Here
});
Code Example 3
Ok, let's try put this to the test. In CODE EXAMPLE 1,
lets insert the following click handler to the link:
$(document).ready(function(){
$("a").click(function(event){
alert("Welcome!");
});
});
Code Example 4
And we have a page that looks like this:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
alert("Welcome!");
});
});
</script>
</head>
<body>
<a href="http://wdvl.com/">WDVL</a>
</body>
</html>
Code Example 5
Running this page we will see an alert pop-up, and then
the page will redirect to wdvl.com. But now let's suppose we
did not want the page to redirect? Would we have to write
lots of code to get this right? If you were nodding while
reading the last sentence I wrote, you obviously have not
been paying attention! All we need to do is add an extra
handler to the READY EVENT, as below:
$(document).ready(function(){
$("a").click(function(event){
alert("The default action of this link has been removed");
event.preventDefault();
});
});
Code Example 6
The example above will now no longer redirect anywhere,
it will simply display the alert message.
jQuery Events
Events in jQuery are extremely important, and essentially
define what your elements on your pages are actually doing.
These include:
• hover( over, out )Whenever the mouse cursor
is moved over a matched element, the first specified
function is fired. Whenever the mouse moves off of the
element, the second specified function fires. Additionally,
checks are in place to see if the mouse is still within the
specified element itself (for example, an image inside of a
div), and if it is, it will continue to 'hover', and not
move out (a common error in using a mouseout event
handler).
• toggle( fn, fn2, fn3,fn4,... )Whenever a
matched element is clicked, the first specified function is
fired, when clicked again, the second is fired, and so on.
All subsequent clicks continue to rotate through the
functions.
• click( )Triggers the click event of each
matched element and causes all of the functions that have
been bound to that click event to be executed.
• dblclick( )This causes all of the functions
that have been bound to that dblclick event to be executed,
and calls the browser's default dblclick action on the
matching element(s). This default action can be prevented by
returning false from one of the functions bound to the
dblclick event. The dblclick event usually fires when the
pointing device button is double clicked over an
element.
• error( )This causes all of the functions
that have been bound to that error event to be executed, and
calls the browser's default error action on the matching
element(s). This default action can be prevented by
returning false from one of the functions bound to the error
event.
• focus()This causes all of the functions
that have been bound to the focus event to be executed. Note
that this does not execute the focus method of the
underlying elements.
• keydown()This causes all of the functions
that have been bound to the keydown event to be executed,
and calls the browser's default keydown action on the
matching element(s). This default action can be prevented by
returning false from one of the functions bound to the
keydown event. The keydown event usually fires when a key on
the keyboard is pressed.
• keyup()This causes all of the functions
that have been bound to the keyup event to be executed, and
calls the browser's default keyup action on the matching
element(s). This default action can be prevented by
returning false from one of the functions bound to the keyup
event. The keyup event usually fires when a key on the
keyboard is released.
• mousedown()The mousedown event fires when
the pointing device button is pressed over an element.
• mouseenter()The mouseenter event fires once
when the pointing device is moved into an element.
• mouseleave()The mouseleave event fires once
when the pointing device is moved away from an element.
• mousemove()The mousemove event fires when
the pointing device is moved while it is over an element.
The event handler is passed one variable - the event object.
Its .clientX and .clientY properties represent the
coordinates of the mouse.
• mouseout()The mouseout event fires when the
pointing device is moved away from an element.
• mouseover()The mouseover event fires when
the pointing device is moved onto an element.
• resize()The resize event fires when a
document view is resized
In conclusion, these are only a few examples of jQuery
events and a beginning of how they can be incorporated into
your code today. Now, if you came here expecting more cool
examples, well, that is exactly what you are going to get. I
have prepared six examples of more jQuery fun things,
including a datepicker, slider, draggables and more.
download the examples HERE. If you followed
last weeks discussion on jQuery you should have no problem
at all seeing how its done. jQuery truly is the write less,
do more framework.
Until next time
About the Author
Marc Steven Plotz is a Senior Software
Developer for a major South African web development company
specializing in the development of enterprise-class web
applications and rapid application development frameworks.
He is also a technical writer for various developer websites
focusing on open source topics like PHP, CSS, HTML and
Javascript. He lives in Pretoria, South Africa, with his
wife and two children.
|
