jQuery Event Handling – Mouse Events

jQuery provides sophisticated event handling mechanism. jQuery responds to clicks, double clicks, mouse up and mouse down events, page load, key events like key up and down and other relevant events. We can have custom functions which are invoked and executed when any of the event triggers.

The following simple HTML file creates a DIV areaDiv and configures click, dblclick, mouseenter and mouseleave events to demonstrate how the event handling works in jQuery.

also read:

If you are looking for a good book on jQuery, please buy jQuery in Action

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#areaDiv").click(function(){
		console.log('Click inside areaDiv');
	});

	$("#areaDiv").dblclick(function(){
		console.log('Double click inside areaDiv');
	});

	$("#areaDiv").mouseenter(function(){
		console.log('Mouse entered areaDiv');
	});

	$("#areaDiv").mouseleave(function(){
		console.log('Mouse exit from areaDiv');
	});
});
</script>
</head>
<body>
<div id="areaDiv" style="border:2px solid;border-radius:25px;
    text-align:center;height:100px;">
This is area div.
</div>
</body>
</html>

The following screen captures shows us that every time we enter into the areaDiv, the mouseenter event is triggered and displays a message to the console.

In the same way, a message is displayed to the console when we move out of the areaDiv.

Subsequently, click and dblclick events also triggered when we click and double click inside the areaDiv respectively.

NOTE: Please enable Firebug in your Firefox browser and then click on Console tab in the Firebug panel to see the log messages displayed.

The below section quickly summarizes the mouse events jQuery supports.

jQuery Mouse Events – Quick Reference

jQuery mouse events are triggered when user interacts with mouse. The following are the mouse events jQuery supports:

jQuery Event – click

Triggered when user clicks on the element.

$("#btn").click(function(){
    alert('Button Clicked');
});

jQuery Event – dblclick

Triggered when user double clicks on the element.

$("#dblClickDiv").dblclick(function(){
    alert('Double Clicked');
});

jQuery Event – mousedown

Similar to click. Triggered when mouse point is over an element and mouse button is pressed.

$("#mouseDownDiv").mousedown(function(){
    alert('Mousedown');
});

jQuery Event – mouseenter

Triggered when mouse pointer enters the element.

$("#mouseEnterDiv").mouseenter(function(){
    alert('Mouse Enter');
});

jQuery Event – mouseleave

Triggered when mouse pointer leaves the element.
$("#mouseLeaveDiv").mouseleave(function(){
    alert('Mouse Leave');
});

jQuery Event – mousemove

Triggered when mouse pointer moves inside the element.

$("#mouseMoveDiv").mousemove(function(){
    alert('Mouse Moved');
});

jQuery Event – mouseout

Similar to mouseleave event. Triggered when mouse pointer leaves an element. This event is also triggered when mouse pointer leaves any of child elements.

$("#mouseOutDiv").mouseout(function(){
    alert('Mouse Out');
});

jQuery Event – mouseover

Triggered when mouse pointer enters an element.

$("#mouseOverDiv").mouseover(function(){
    alert('Mouse Over');
});

jQuery Event – mouseup

Triggered when mouse pointer is over an element and mouse button is released.

$("#mouseUpDiv").mouseup(function(){
    alert('Mouse Up');
});

In addition to mouse events jQuery also supports key events triggered when user interacts with keyboard. We’ll discuss about jQuery key events in another article.