jQuery Mouse Events | ITGeared.com

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>

Hover over the mouse!

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

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>

Mouse Coordinates:

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources