Post
Ask Question

Event in JavaScript: Part 3

Before reading this article, please go through the following articles:
  1. The event in JavaScript: Part 1
  2. The event in JavaScript: Part 2

Introduction

 
In this article you will learn about mouse events. There are seven types of mouse events, they are
  1. Onclick
  2. Ondblclick
  3. Onmousedoen
  4. Onmousemove
  5. Onmouseover
  6. Onmouseout
  7. Onmouseup
I have divided these mouse events into three parts.
 
Third part 
 
Today you will learn about the OnMouseMove, OnMouseDown and OnMouseUp events.
 
OnMouseMove The mousemove the event works fine, but you should be aware that it may take quite some system time to process all mousemove events. If the user moves the mouse one pixel then the mousemove event fires. Even when nothing actually happens, long and complicated functions take time and this may affect the usability of the site: everything goes very slowly, especially on old computers.
 
Therefore it's best to register an onmousemove event handler only when you need it and to remove it as soon as it's not needed anymore. The following is an example.
 
Example  
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.     <style>   
  5.         div   
  6.         {   
  7.             width: 199px;   
  8.             height: 99px;   
  9.             border: 1px solid;   
  10.             margin: 45px;  
  11.         }  
  12.      </style>  
  13.     <script>  
  14.          function myFunction(event) {  
  15.            x = event.clientX;  
  16.            y = event.clientY;  
  17.            coor = "result: (Yaxis-" + x + "Xaxis-" + y + ")";  
  18.            document.getElementById("demo").innerHTML = coor  
  19.          }  
  20.            function clearCoor() {  
  21.              document.getElementById("demo").innerHTML = "";  
  22.          }  
  23.      </script>  
  24.  </head>  
  25.  <body style="margin: 0px;">  
  26.      <div id="coor" onmousemove="myFunction(event)" onmouseout="clearCoor()">  
  27.          <p id="demo">  
  28.          </p>  
  29.      </div>  
  30.     <p>  
  31.         Mouse over the rectangle above, and get the coordinates of your mouse pointer.</p>  
  32.  </body>  
  33.  </html> 
Output 
cordinet.jpg
 
OnMousedown and OnMouseup
 
If the user clicks on an element no less than three mouse events fire, in this order:
  1. mousedown, when the user depresses the mouse button on this element
  2. mouseup, when the user releases the mouse button on this element
In general mousedown and mouseup are more useful than click. Some browsers don't allow you to read out mouse button information onclick. Furthermore, sometimes the user does something with his mouse but no click event follows.
 
Suppose the user depresses the mouse button on a link, then moves his mouse of the link and then releases the mouse button. Now the link only registers a mousedown event. Similarly, if the user depresses the mouse button, then moves the mouse over a link and then releases the mouse button, the link only registers a mouseup. In neither case does a click event fire.
 
Whether or not this is a the problem depends on the user interaction you want. But you should generally register your script onmousedown/up, unless you're completely sure you want the click event and nothing else.
 
If you use alerts in handling these events then the browser may lose track of which event took place on which element and how many times it took place, messing up your scripts. So it's best not to use alerts.
 
Example
  1. <html>  
  2. <head>  
  3.     <script type="text/javascript">  
  4.         function OnButtonDown(button) {  
  5.             button.style.color = "red";  
  6.         }  
  7.         function OnButtonUp(button) {  
  8.             button.style.color = "green";  
  9.         }  
  10.     </script>  
  11. </head>  
  12. <body>  
  13.     <h2>  
  14.         Click on the following button and see its text color.</h2>  
  15.     <br />  
  16.     <button onmousedown="OnButtonDown (this)" onmouseup="OnButtonUp (this)">  
  17.         Test button</button><br>  
  18.     <br />  
  19.     <button id="testButton">  
  20.         Capture Test</button>  
  21. </body>  
  22. </html>  
Output
 
move.jpg


Similar Articles