Did you find this useful?
Socialize it today.


jQuery Mouse Events

Wednesday, June 27, 2012

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)


ParameterDescription
inFunctionSpecifies function for mouseenter event
outFunctionSpecifies optional function for mouseleave event
functionSpecifies 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> 


mouse
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> 


mouse
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> 


Mouse Coordinates:


Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

JavaScript and jQuery: The Missing Manual Pro jQuery HTML CSS and JavaScript Editor