Handling Mouse Overs and Keyboard Events with the jQuery JavaScript Library - Review: handling mouseup and mousemove events with jQuery
(Page 2 of 4 )
Before I start teaching you how to use the “jQuery” library to handle mouse overs and some basic keyboard events, I’d like to reintroduce the pair of examples developed in the preceding article. They demonstrated how to process, in a basic manner, “mouseup” and “mousemove” events via the API provided by jQuery.
That being said, here are the corresponding code samples that show how to handle these mouse events:
(example on handling a 'mouseup' 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 mouseup 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").mouseup(function(){
alert('Redirecting to Devshed.com now!');
});
});
</script>
</head>
<body>
<h1>Basic example on using jQuery with mouseup event</h1>
<a href="http://www.devshed.com/">Visit Devshed.com now!</a>
</body>
</html>
(example on handling a 'mousemove' 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 mousemove 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").mousemove(function(){
alert('Redirecting to Devshed.com now!');
});
});
</script>
</head>
<body>
<h1>Basic example on using jQuery with mousemove event</h1>
<a href="http://www.devshed.com/">Visit Devshed.com now!</a>
</body>
</html>
As you can see, the hands-on examples listed above use the pertinent “mouseup()” and “mousemove()” methods included with jQuery to display some simple alert boxes on the browser. These boxes are displayed in response to the same mouse events.
In addition, it’s worthwhile to notice how the link that triggers the display of the alert boxes is accessed via the handy $() function. Pretty simple and effective, right?
So far, everything looks good. At this point, I’m sure that you’re familiar with using the “mouseup()” and “mousemove()” methods to handle these typical mouse events. However, as I mentioned in the beginning, jQuery comes with many other helpful methods. These can be used not only for processing a bunch of mouse-related events, but for checking whether or not a determined key has been pressed.
In the course of the following section, I’m going to set up another example for you, to demonstrate how to easily handle mouse overs with jQuery.
To learn how this will be done, please click on the link that appears below and keep reading.
Next: Using the mouseover() method >>
More JavaScript Articles
More By Alejandro Gervasio
