Home arrow JavaScript arrow Page 2 - Handling Mouse Events with the jQuery JavaScript Library
JAVASCRIPT

Handling Mouse Events with the jQuery JavaScript Library


Welcome to the second part of a multi-part series that introduces you to the jQuery JavaScript library. In this article, I will provide you with a quick overview of how to handle the “mouseup” and “mousemove” events with the jQuery package.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
August 19, 2009
TABLE OF CONTENTS:
  1. · Handling Mouse Events with the jQuery JavaScript Library
  2. · Review: the “$()” function and the “ready()” method
  3. · Handling mouseup events with the jQuery mouseup() method
  4. · Handling mousemove events simply with the mousemove method

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Handling Mouse Events with the jQuery JavaScript Library - Review: the “$()” function and the “ready()” method
(Page 2 of 4 )

As I said in the beginning, the “jQuery” library allows you to unobtrusively assign different event handlers to targeted elements of a web page. In most cases, this event assignment is carried out by means of its two primary components, that is the $()” function and the “ready()” method.

Concretely speaking, the $() function can be used to access any element within the web page’s DOM, while on the other hand, the “ready()” method is utilized to execute portions of code after the whole web page has been loaded.

But you'll better understand the way that these components actually work if you examine the following examples, excerpted from the previous tutorial:


(example on using click event with jQuery)


<!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</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").click(function(){

alert('You are going to visit Devshed.com now...');

});

});

</script>

</head>

<body>

<h1>Basic example on using jQuery</h1>

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

</body>

</html>



(extended example on using click event with jQuery)


<!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 onclick 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").click(function(){

return confirm('Do you want to visit Devshed.com now?');

});

});

</script>

</head>

<body>

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

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

</body>

</html>



(example on using mousedown event with jQuery)


<!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 mousedown 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").mousedown(function(){

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

});

});

</script>

</head>

<body>

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

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

</body>

</html>


As you’ll recall, each of the above examples demonstrates how to use the $() function in conjunction with the aforementioned “ready()” method to intercept a few mouse clicks and display a couple of alert and confirm boxes in response. You should also notice that for all of these cases, the JavaScript code that adds different behaviors to selected web page elements is placed outside the structural markup, thus implementing it in a truly unobtrusive manner.

Well, at this point you've hopefully recalled how to fire up a predetermined function when a user clicks on a specific web page element. But, as you may guess, the jQuery package allows you to handle other mouse events with the same ease.

Therefore, assuming that you’re interested in learning the full details on this topic, in the following section I’m going to show you how to trigger a specified function in response to a “mouseup” event.

To see how this process will be performed with jQuery, please read the next few lines.


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 9 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials