jQuery Events Part - II : Mouse Events

jQuery mouse events

In this post we will look how jQuery mouse events works. jQuery library provides mouse events like click, double click, mouseup, mousedown, toggle..etc. Using this jQuery events one can easily perform the required operations or actions. We will look jQuery events samples in this post.

.click()
click event get triggered to an element when mouse button is pressed and released on that element. Any HTML element can trigger this event.

Sample code for jQuery click event:

<a id="mouseclick" href="mouseclickdemo.aspx">Click here</a>

$(document).ready(function() 
{  
$("#mouseclick").click(function(){
alert("This is jQuery Mouse Click event.")
});
});

In above jQuery code for click event will triggered and alter with “This is jQuery Mouse click event” will get displayed.

.dblclick()
dblclick event get triggered to an element when mouse button is pressed and released twice on that element. Any HTML element can trigger this event.

Below sample code shows how jQuery double click (dblclick) event works:

<div id="mousedblclick"> Click here</div>
$(document).ready(function() 
{  
$("#mousedblclick".dblclick(function(){
alert("This is jQuery mouse dblClick event.")
});
});

Above code shows that after double clicking on div tag it will trigger jQuery dblclick event and will show alert message “This is mouse dblclick event.”

.mousedown()
mousedown event get triggered to an element when mouse button is moved over the element and mouse button is pressed . Any HTML element can trigger this event.

Below sample code shows how jQuery mouse down event works:

    <span id="mousedown">Click here</span>

    $(document).ready(function() 
    {  
    $("#mousedown").mousedown(function(){
    alert("jQuery mousedown event.")
    });
    });

In above sample of jQuery, when mouse down event triggers then it will show alert message “jQuery mousedown event.”

.mouseup()
mouseup event get triggered to an element when mouse button is pressed and then released. Any HTML element can trigger this event.

Below is sample jQuery code for mouseup event:

<div id="mouseup"> Click here</ div>
$(document).ready(function() 
{  
$("#mouseup").mouseup(function(){
alert("jQuery mouseup event.")
});
});
When mouse button is released then jQuery mouse event will get triggered and it will show alert message “jQuery mouseup event.”

.toggle()
toggle event used to do the alternate actions for perticular operation. Which is used in association with click.

code shows how jQuery toggle event works :

<div id="toogleDiv"> Change Color </div>

$(document).ready(function() 
{  
$("toogleDiv").toggle( 
function() { 
$(this).css("backgroundcolor", 'blue'); 
}, 
function () { 
$(this).css("backgroundcolor",'green');
});
});
jQuery toggle event used to change the state of object from one state to other. for example we can show or hide div element using toggle event. Toggle event works in association with click event. In above code sample when we click on div element it will change color from blue to green and if it already green then changes it to blue.