jQuery supports a variety of mouse related events. In previous articles, we covered such events such as click and dblclick. In this article, we will take
a closer look at other events such as hover, mousedown, mouseup, mouseenter, mouseleave, mousemove, mouseover, and mouseout.
Syntax
$(selector).hover(inFunction,outFunction)
$(selector).mousedown(function)
$(selector).mouseup(function)
$(selector).mouseenter(function)
$(selector).mouseleave(function)
$(selector).mouseover(function)
$(selector).mouseout(function)
$(selector).mousemove(function)
| Parameter | Description |
|---|
| inFunction | Specifies function for mouseenter event |
| outFunction | Specifies optional function for mouseleave event |
| function | Specifies optional function to run |
HTML Example
We will use the following HTML for the examples listed below.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// ... jQuery Code ...
});
</script>
</head>
<body>
<img id="imgMouse" src="mouse.jpg" />
<div id="div1"> <!-- Some Content --> </div>
</body>
</html>
Hover
The hover event wil bind two handlers to the matched elements, to be executed when the mouse pointer enters (mouseenter) and leaves (mouseleave)
the elements. The syntax for the hover event is $(selector).hover(inFunction,outFunction). Here is an example.
<script type="text/javascript">
$("#imgMouse").hover(function(){
$("div").css("background-color", "Yellow")
}, function(){
$("div").css("background-color", "LightGrey")
});
</script>
Mousedown and Mouseup
The mousedown event will trigger as soon as the mouse button is pressed. Unlike the click event, it does not wait for the button to be depressed. This event can be used in place of the click event when you want to
have the event fire as soon as the button is pressed. This event remains triggered while the button is clicked and held. The syntax for the mousedown event is $(selector).mousedown(function). The mouseup event will
trigger as soon as the mouse button is released. The syntax for the mouseup event is $(selector).mouseup(function). Here is an example.
<script type="text/javascript">
$("#imgMouse").mousedown(function(){
$("div").css("background-color", "Yellow")
});
$("#imgMouse").mouseup(function(){
$("div").css("background-color", "LightGrey")
});
</script>
Click and hold the mouse button!
Mouseover, Mouseout, Mouseenter, and Mouseleave
Mouseover is generally combined with mouseout while mouseenter is usually combined with mouseleave. The mouseover and mouseenter, and, mouseout and mouseleave events are similar but do have specific differences.
In the case of mouseenter and mouseleave, the events trigger when the pointer moves in and out of the bound element. The mouseover and mouseout events trigger as well when the pointer moves out of any child element
within the bound element. In the example below, the mouseenter and mouseleave events are triggered on the left div element, while the mouseover and mouseout events are triggered on the
right div. You will notice that when you mouseover and mouseout over a child element (span) in the right div, the counter increases as well. Where in the
left div, this behaviour does not occur.
<script type="text/javascript">
var a = 0;
$("#div1").mouseenter(function () {
$("#span1-1").text("mouseenter");
$("#span1-2").text(++a);
});
$("#div1").mouseleave(function () {
$("#span1-1").text("mouseleave");
$("#span1-2").text(++a);
});
var b = 0;
$("#div1").mouseover(function () {
$("#span2-1").text("mouseover");
$("#span2-2").text(++b);
});
$("#div1").mouseout(function () {
$("#span2-1").text("mouseout");
$("#span2-2").text(++b);
});
</script>
Move your mouse! - 0
Move your mouse! - 0
Mousemove
The mousemove event occurs whenever the mouse pointer moves within a specified element. The mousemove() method triggers the mousemove event,
or if the function parameter is set, it specifies what happens when a mousemove event occurs. Here is an example.
<script type="text/javascript">
$(document).mousemove(function (e) {
$("span").text(e.pageX + ", " + e.pageY);
});
</script>
Did you find the page informational and useful? Share it using one of your favorite social sites.
Recommended Books & Training Resources
