Most common way users interact with the computer is by using pointing device called mouse. This wonderful device help graters amount of improvement usability of computer applications. Today’s all the computer language support mouse events. In this article I am going to explain how to handle mouse event using JavaScript.
When we consider JavaScript event there are number of mouse event but here I am explaining most of commonly used and highly interactive event with web application. Following are some of the mouse event of JavaScript.

Click
dblclick
mouseover
mouseout
mouseenter
mouseleave
mousedown
mouseup
mousemove
contextmenu
mousewheel
DOMMouseScroll

Now I am going to describe some of event and when they are occurring and pro grammatically how to used them.


Click event.

Most common event is click event. This event is fired when you basically click on an element. This can be describe farther as “the click event is fired when you use your mouse to press down on an element and then release the press while still over that same element”. For a example we want to click a button and during click event we are go through following steps.
1. Mouse on the button ( mouse over event )
2. Press down the button (mouse down event )
3. Release the button ( mouse up event )
4. Finished the release
At the moment of finished the release mouse click event is firing. During the click event life cycle above events are occurring as sub events.

1. var
   
   button =
   
   document.querySelector
   
   (
   
   "#testClicked"
   
   )
   
   ;
   
2. button.addEventListener
   
   (
   
   "click"
   
   ,
   
   doClick,
   
   false
   
   )
   
   ;
   
3. 
   
4. function
   
   doClick(
   
   e)
   
   {
   
5. console.log
   
   (
   
   "Hello how are you ?!"
   
   )
   
   ;
   
6. }
   

Double click event

Double click event fires when you do click event within split second. Time gap between two click event will be decide double click event firing or not.

1. var
   
   button =
   
   document.querySelector
   
   (
   
   "#testDoubleClicked"
   
   )
   
   ;
   
2. button.addEventListener
   
   (
   
   "click"
   
   ,
   
   doDoubleClick,
   
   false
   
   )
   
   ;
   
3. 
   
4. function
   
   doDoubleClick(
   
   e)
   
   {
   
5. console.log
   
   (
   
   "Clicked Twise Me"
   
   )
   
   ;
   
6. }
   

Mouseover and Mouseout event

When you place mouse pointer on element mouse over event will be fired. Respectively when you move mouse pointer outside of that element mouse out event will be fire. These two event help developers to build highly interact and informative web applications.

1. var
   
   button =
   
   document.querySelector
   
   (
   
   "#buttonMouseEvent"
   
   )
   
   ;
   
2. button.addEventListener
   
   (
   
   "mouseover"
   
   ,
   
   doMouseHover,
   
   false
   
   )
   
   ;
   
3. button.addEventListener
   
   (
   
   "mouseout"
   
   ,
   
   doMouseOut,
   
   false
   
   )
   
   ;
   
4. 
   
5. function
   
   doMouseHover(
   
   e)
   
   {
   
6. console.log
   
   (
   
   "Mouse Hover Me"
   
   )
   
   ;
   
7. }
   
8. 
   
9. function
   
   doMouseOut(
   
   e)
   
   {
   
10. console.log
    
    (
    
    "Mouse Hover Me"
    
    )
    
    ;
    
11. }
    

Mouseenter and mouseleave

These two event are also identically same with mouse over and mouse out event when the parent element does not have any child element. If parent element contained any child element mouse over and mouse out event will be fired each time mouse in and out. The main diference is mouseenter and mouse leave event is it is firing only one time. It does not care any mouse movement on child element

Mousedown and mouseup event.

As I explain in mouse click event these two events are sub event of mouse click event. When you are press mouse on any element mousedown event occurring other hand when you release mouse mouseup event occurring. After you finish above two event successfully mouse click event will be occurred.

1. var
   
   button =
   
   document.querySelector
   
   (
   
   "#buttonMouseEvent"
   
   )
   
   ;
   
2. button.addEventListener
   
   (
   
   "mousedown"
   
   ,
   
   doMouseDown,
   
   false
   
   )
   
   ;
   
3. button.addEventListener
   
   (
   
   "mouseup"
   
   ,
   
   doMouseUp,
   
   false
   
   )
   
   ;
   
4. 
   
5. function
   
   doMouseDown(
   
   e)
   
   {
   
6. console.log
   
   (
   
   "Mouse Down"
   
   )
   
   ;
   
7. }
   
8. 
   
9. function
   
   doMouseUp(
   
   e)
   
   {
   
10. console.log
    
    (
    
    "Mouse Up"
    
    )
    
    ;
    
11. }
    

Mousemove event

When you are moving mouse trough out screen mouse move event is occurring. Every even has event properties. Mouse move event can capture exact point of mouse pointer is right now so we can access those properties by using event properties.

1. button.addEventListener
   
   (
   
   "mousedown"
   
   ,
   
   doMouseDown,
   
   false
   
   )
   
   ;
   
2. 
   
3. function
   
   doMouseDown(
   
   e)
   
   {
   
4. console.log
   
   (
   
   "my current coordinate are at X:"
   
   +
   
   e.screenX
   
   +
   
   " Y:"
   
   +
   
   e.screenY
   
   )
   
   ;
   
5. }
   

I will explain other complex mouse event and how to handle them using javascript in my feature article with more details.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.

2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Download