Home arrow JavaScript arrow Page 3 - Handling Mouse Overs and Keyboard Events with the jQuery JavaScript Library
JAVASCRIPT

Handling Mouse Overs and Keyboard Events with the jQuery JavaScript Library


Welcome to the third part of an eight-part series introducing the jQuery JavaScript library. This series provides you with a quick overview of the most important features that come packaged with the jQuery JavaScript framework. You'll learn how to manipulate web pages via the DOM, handle different mouse and keyboard events, develop Ajax applications, and create eye-popping effects.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 2
August 26, 2009
TABLE OF CONTENTS:
  1. · Handling Mouse Overs and Keyboard Events with the jQuery JavaScript Library
  2. · Review: handling mouseup and mousemove events with jQuery
  3. · Using the mouseover() method
  4. · Introducing the keydown() method

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Handling Mouse Overs and Keyboard Events with the jQuery JavaScript Library - Using the mouseover() method
(Page 3 of 4 )

In the previous section, I reintroduced a pair of examples aimed at illustrating how to utilize the “mouseup()” and “mousemove()” methods bundled with the jQuery library to handle these mouse events with extreme ease.

I’m only scratching the surface when it comes to exploring the event handling capacities provided by this library. It's armed with other methods that can be utilized to process, for instance, mouse overs and keyboard actions.

Thus, to demonstrate how jQuery can be used to handle the aforementioned mouse overs, below I coded another example, which will display an alert box on screen each time a user places the mouse over a sample link.

Here’s how the example in question looks:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Basic example on using jQuery with mouseover event</title>

<style type="text/css">

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

font: 24px bold Arial, Helvetica, sans-serif;

color:#000;

}

</style>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("a").mouseover(function(){

alert('Redirecting to Devshed.com now!');

});

});

</script>

</head>

<body>

<h1>Basic example on using jQuery with mouseover event</h1>

<a href="http://www.devshed.com/">Visit Devshed.com now!</a>

</body>

</html>

 

If you ever thought that handling mouse overs with jQuery was a difficult process, then I’m afraid that you were wrong! As you can see from the above example, I used a brand new method, not surprisingly called “mouseover(),” to display an alert box each time a user places the mouse over the link that points to “Devshed.com.” Try the previous script for yourself, and you’ll see that it works like a charm!

All right, after you’ve examined the prior example in detail, I assume that you learned how to use the handy “mouseover()” method to handle mouse overs with jQuery. Next, we'll see which methods are provided by the library to handle specific keyboard events.

This interesting topic will be discussed in depth in the section to come, so go ahead and read the next few lines. I’ll be there, waiting for you.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 5 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials