Event in JavaScript: Part 3

Sudhir Choudhary
Mar 14, 2013
3.2k
0
0
Article

doun.zip|move.zip

Before reading this article, please go through the following articles:

Introduction

In this article you will learn about mouse events. There are seven types of mouse events, they are

Onclick
Ondblclick
Onmousedoen
Onmousemove
Onmouseover
Onmouseout
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 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 any more. The following is an example.

Example

<!DOCTYPE html>

<html>
<head>
    <style>
        div
        {
            width: 199px;
            height: 99px;
            border: 1px solid;
            margin: 45px;
        }
     </style>
    <script>
         function myFunction(event) {
           x = event.clientX;
           y = event.clientY;
           coor = "result: (Yaxis-" + x + "Xaxis-" + y + ")";
           document.getElementById("demo").innerHTML = coor
         }
           function clearCoor() {
             document.getElementById("demo").innerHTML = "";
         }
     </script>
</head>
<body style="margin: 0px;">
     <div id="coor" onmousemove="myFunction(event)" onmouseout="clearCoor()">
         <p id="demo">
         </p>
     </div>
    <p>
        Mouse over the rectangle above, and get the coordinates of your mouse pointer.</p>
</body>
</html>

Output

OnMousedown and OnMouseup

If the user clicks on an element no less than three mouse events fire, in this order:

mousedown, when the user depresses the mouse button on this element
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 off 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 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 thenb 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

<html>
<head>
    <script type="text/javascript">
        function OnButtonDown(button) {
            button.style.color = "red";
        }
        function OnButtonUp(button) {
            button.style.color = "green";
        }
    </script>
</head>
<body>
    <h2>
        Click on the following button and see its text color.</h2>
    <br />
    <button onmousedown="OnButtonDown (this)" onmouseup="OnButtonUp (this)">
        Test button</button><br>
    <br />
    <button id="testButton">
        Capture Test</button>
</body>
</html>