JavaScript Mouse Events


1. mouseenter: This event occurs when the mouse pointer is moved onto an element.

Syntax:

    <element onmouseenter = ”functionName()” >


Example:

    <img src=”logo.jpg” onmouseenter = ”bigImg(this)” onmouseleave = ”normalImg(this)” height=”50px” width=”50px” />

    <script>
        function bigImg(x)
        {
            x.style.height=”100px”;
            x.style.height=”100px”;
        }

        function normalImg(x)
        {
            x.style.height=”50px”;
            x.style.height=”50px”;
        }
    </script>        


2. mouseleave: This event occurs when the mouse pointer is moved out of an element.

Syntax:

    <element onmouseleave = ”functionName()” >


Example:

    <img src=”logo.jpg” onmouseenter = ”bigImg(this)” onmouseleave = ”normalImg(this)” height=”50px” width=”50px” />

    <script>
        function bigImg(x)
        {
            x.style.height=”100px”;
            x.style.height=”100px”;
        }

        function normalImg(x)
        {
            x.style.height=”50px”;
            x.style.height=”50px”;
        }
    </script>    


3. mousemove: This event occurs when the mouse pointer is moving while it is over an element.

Syntax:

    <element onmousemove = ”functionName()” >


Example:

    <div onmouseover=”myScript(event)”></div>

    <script>
        function myScript(e)
        {
            var x = e.clientX;
            var y = e.clientY;
            document.write(“x coordinate is “ + “x” + “and y coordinate is “ + “y”);
        }
    </script>    



4. click: This event occurs when the user clicks on an element.

Syntax:

    <element onclick = ”functionName()” >


Example:

    <button onclick=”myScript()”></button>

    <script>
        function myScript()
        {
            alert(“Button is clicked”);
        }
    </script>


5. dblclick(): This event occurs when the user double-clicks on an element.

Syntax:

    <element ondblclick = ”functionName()” >


Example:

    <button ondblclick=”myScript()”></button>

    <script>
        function myScript()
        {
            alert(“Button is double clicked”);
        }
    </script>    


6. contextmenu: This event occurs when the user right-clicks on an element to open the context menu.

Syntax:

    <element oncontextmenu = ”functionName()” >


Example:

    <button oncontextmenu=”myScript()”></button>

    <script>
        function myScript()
        {
            alert(“Button is right clicked”);
        }
    </script>    



7. wheel: This event occurs when the wheel of mouse is rotated in any direction.

Syntax:

    <element onwheel = ”functionName()” >


Example:

    <div onwheel=”myScript()”></div>
    <script>
        function myScript()
        {
            alert(“mouse wheel is rotated”);
        }
    </script>    


8. select: This event occurs after some text has been selected in an element.

Syntax:

    <element onselect = ”functionName()” >


Example:

    <input type=”text” onselect=”myScript()” />
    <script>
        function myScript()
        {
            alert(“text is selected”);
        }
    </script>    


9. input: This event occurs when an element gets user input.

Syntax:

    <element oninput = ”functionName()” >


Example:

    <input type=”text” oninput=”myScript()” id=”myInput” />
    <p id=”dispInput”></p>
    <script>
        function myScript()
        {
            var x = document.getElementById(“myInput”).value;
            document.getElementById(“dispInput”).innerHTML = “ You entered : “ + x;
        }
    </script>