jQuery Basics for Web Developers: Mouse Events

By Vincent Wright

We are binding the mouse over event to the DIV element. When the mouse is moved over the DIV element, we fade out and then fade in the DIV element.

Mouse Enter

The mouse enter event is similar to the mouse over event. Both events fire when the mouse pointer enters the HTML element. The difference is that the mouse over element will also fire when nested elements are "moused" over. Most of the time, it is better to use the mouse enter event. The syntax is:

    .mouseenter(function() { put function calls in here });
    

Our sample code for the mouse enter event is the same as mouse over.

Mouse Leave

The mouse leave event fires when the mouse pointer leaves the bound HTML element. The syntax is:

    .mouseenter(function() { put function calls in here });
    

The sample code for this event is the same for the mouse enter and mouse over events.

Hover

The hover event combines the mouse enter and mouse leave events. This event takes two functions, one for the mouse enter and one for the mouse leave. Here is the syntax:

    .hover(function() {
        Put in mouse enter function here
    }, function() {
        Put in mouse leave function here
    });
    

jQuery code from the sample:

    $("#MouseHover").hover(function () {
        $(this).css("background-color", "blue");
    }, function () {
        $(this).css("background-color", "white");
    });
    

HTML from the sample:

    <div class="button" id="MouseHover">Mouse Hover</div>
    

We are binding the hover event to the DIV element. When the mouse enters the DIV element, the background is changed to blue and when the mouse leaves, the background is changed to white.

Toggle

The toggle event allows you to create an almost unlimited number of click events to be bound to a HTML element. When the element is clicked, the toggle event cycles through the JavaScript functions. There must be at least two functions. The syntax is:

    .toggle(function() {
        Put first event here
    }, function() {
        Put second event here
    });
    

jQuery code from the sample:

    $("#Toggle").toggle(function () {
        $(this).css("background-color", "blue");
    }, function () {
        $(this).css("background-color", "red");
    }, function () {
        $(this).css("background-color", "yellow");
    });
    

HTML from the sample:

    <div class="button" id="Toggle">Toggle (Click me to cycle colors)</div>
    

The code binds the toggle event the DIV element. Each time the DIV element is clicked, the background color is changed. It starts with blue, then red, and last yellow. When it is yellow and is clicked, it will start over again with blue. jQuery takes care of tracking the order.

Conclusion

As you can see, jQuery offers a lot of events. Most of the events are standard JavaScript events that are bound differently while others are new events specific to jQuery.

    <html>
        <head>
            <script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("#SingleClick").click(function (b) {
                        alert("Single Click");
                    });

                    $("#DoubleClick").dblclick(function () {
                        alert("Double Click");
                    });

                    $("#MouseDown").mousedown(function (b) {
                        alert(b.which);
                    });

                    $("#MouseUp").mouseup(function () {
                        alert("Mouse Button Up");
                    });

                    $("#MouseMove").mousemove(function (c) {
                        $(this).html("Mouse is moving. Coordinates are " + c.pageX + " by " + c.pageY);
                    });

                    $("#MouseOver").mouseover(function () {
                        $(this).fadeOut();
                        $(this).fadeIn();
                    });

                    $("#MouseEnter").mouseenter(function () {
                        $(this).fadeOut();
                        $(this).fadeIn();
                    });

                    $("#MouseLeave").mouseleave(function () {
                        $(this).fadeOut();
                        $(this).fadeIn();
                    });

                    $("#MouseHover").hover(function () {
                        $(this).css("background-color", "blue");
                    }, function () {
                        $(this).css("background-color", "white");
                    });

                    $("#Toggle").toggle(function () {
                        $(this).css("background-color", "blue");
                    }, function () {
                        $(this).css("background-color", "red");
                    }, function () {
                        $(this).css("background-color", "yellow");
                    });
                });
            </script>
            <style type="text/css">
                .button { border: thin solid black; height: 20px; padding: 5px; margin-bottom: 15px; }
            </style>
        </head>
        <body>
            <div class="button" id="SingleClick">Single Click Me</div>
            <div class="button" id="DoubleClick">Double Click Me</div>
            <div class="button" id="MouseDown">Mouse Button Down</div>
            <div class="button" id="MouseUp">Mouse Button Up</div>
            <div class="button" id="MouseMove">Mouse Move</div>
            <div class="button" id="MouseOver">Mouse Over</div>
            <div class="button" id="MouseEnter">Mouse Enter</div>
            <div class="button" id="MouseLeave">Mouse Leave</div>
            <div class="button" id="MouseHover">Mouse Hover</div>
            <div class="button" id="Toggle">Toggle (Click me to cycle colors)</div>
        </body>
    </html>
    



Page 2 of 2

Previous Page
1 2
 

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date