JQuery handling Mouse Event like clicks,dblclick,hover, mouseentry mouseleave and reading positions

One of the important part of JQuery is handling of events. There are several functions available to handle different events that occur. JQuery has a big list of events it can handle. Events are often described as trigger or fires to execute a part of the code intended to complete a process. We may select multiple events or common event affecting multiple components.
Thought the list is big we must carefully select events which is best for the given situation.
Mouse generated events
Form generated events
Keyboard generated events
Page generated events

We can click or double click any button
The most popular event is click event. We can use this event for sensing any click on buttons , radio buttons , checkboxes and other components.
By using class we can create one common event for a group of buttons or components. Click event can happened to radio button or checkbox or any other element or even to the full document page.
We can add dblclick to any event to trigger the code associated with double click event. We can combine single click and double click events to execute a common event handler code.
Hover event of mouse has two parts, in first part we can trigger a function which is executed when mouse enter the element and next part executes when mouse moves out of the element.
("#d1").hover(function(){
///////// mouse enter function ////
$('#d1').css("background-color", "blue");
//////// mouse out function //////////
}, function(){
$('#d1').css("background-color", "yellow");
});

Mousemove and mouseout
When we move mouse over any element the mousemove event gets fired. To understand the difference we have added the mouseout event also to mousemove event.
$(document).ready(function() {
$('#d1').mousemove(function(){
$("#t1").html('You have moved the mouse inside box');
});
$('#d1').mouseout(function(){
$("#t1").html('You have moved Out ');
});
})
Mouseenter Mouseleave
Similarly we can use mouseenter and mouseleave function to trigger event when mouse enters and when mouse leaves the element .
$('#t123').mouseenter(function(){
$('#d1').html("Mouse entered function ");
})
////
$('#t123').mouseleave(function(){
$('#d1').html("Mouse leave function ");
})
Mouse position ( horizontal and vertical ) on click
We can read the clicked position of the mouse in Horizontal coordinate ( X ) and vertical coordinate ( Y ) . Our 0 position for X is left edge and 0 position for Y is top edge of the page.
Watch part – 2 for keyboard events