JavaScript Program to Demonstrate Mouse Events

JavaScript Program to Demonstrate Mouse Events

Write a JavaScript program to demonstrate mouse events.



Source Code
<html>
<head>
    <title>Mouse Events</title>
    <script>
    function init()
    {
        var panel = document.getElementById('panel')
        var btn = document.getElementById('btn')

        btn.addEventListener("dblclick", dblClick)
        btn.addEventListener("mousedown", mouseDown)
        btn.addEventListener("mouseup", mouseUp)
        btn.addEventListener("mouseover", mouseOver)
        btn.addEventListener("mouseout", mouseOut)
        btn.addEventListener("mousemove", mouseMove)
    }

    function click()
    {
        panel.innerHTML += "Mouse clicked<br/>"
    }

    function dblClick()
    {
        panel.innerHTML += "Mouse double clicked<br/>"
    }
    function mouseDown()
    {
        panel.innerHTML += "Mouse down<br/>"
    }
    function mouseUp()
    {
        panel.innerHTML += "Mouse up<br/>"
    }
    function mouseOver()
    {
        panel.innerHTML += "Mouse over<br/>"
    }
    function mouseOut()
    {
        panel.innerHTML += "Mouse out<br/>"
    }
    function mouseMove()
    {
        panel.innerHTML += "Mouse moved<br/>"
    }
    </script>
</head>

<body onload="init()">
<input type="button" id="btn" value="Mouse Events" onclick="click()"/>
<h3>Mouse events performed are</h3>
<p id="panel"></p>
</body>

</html>
Output