• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

jQuery Event Handling – Mouse Events

January 19, 2013 //  by Ganesh Prakhya//  Leave a Comment

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:

  • Introduction to jQuery
  • What is jQuery Ajax?

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.
mouse-exut-event

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

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

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.

also read:

  • Introduction to jQuery
  • What is jQuery Ajax?

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

Category: jQuery

About Ganesh Prakhya

Previous Post: «jquery Refreshing DIV Content with jQuery
Next Post: jQuery Event Handling – Key Events jquery»

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact