Previous chapter (JavaScript Language - Loop)Next chapter (JavaScript Language - Trycatch)

JavaScript Click and Mouse Events

Javascript Events are the actions which are detected by the javascript when they are fired.

Other examples in Events (JavaScript Language)

Result from the Online TryIt-Editor

<!doctype html>
<html>
<head>
    <title>HtmlNest.com live html example</title>
    <script type="text/javascript">
        function message() {
            alert("You clicked me!")
        }
        function mdown() {
            document.getElementById("heading1").style.backgroundColor = "red";
        }

function mmove() {
            document.getElementById("heading2").style.fontSize = "26px";
        }
        function mout() {
            document.getElementById("heading2").style.fontSize = "18px";
        }
        function mover() {
            document.getElementById("heading3").style.color = "red";
        }
        function mup() {
            document.getElementById("heading3").style.color = "blue";
        }
      
    </script>
</head>
<body>
    <input type="button" onclick="message()" value="Click once" />
    <p>
        A function is called when the button is clicked. The function gives a message.
    </p>
    <br />
    <input type="button" value="Double Click" ondblclick="message()" />
    <p>
        A function is called when the button is double clicked. The function gives a message.
    </p>
    <br />
    <h3 onmousedown="mdown()" id="heading1">
        When you Press the mouse on this heading the background color will change.
    </h3>
    <br />
    <h3 onmousemove="mmove()" onmouseout="mout()" id="heading2">
        When you move the mouse on this heading the size of the text will increase and when
        mouse out the text size will decrease.
    </h3>
    <br />
    <h3 onmouseover="mover()" onmouseup="mup()" id="heading3">
        When you move the mouse pointer on this heading the color of text will change to
        red and when the mouse pointer out the color will change to blue.
    </h3>
    <br />
</body>
</html>

chrome

^1.0

safari

^1.0

Firefox

^1.0

^3.0

opera

^4.0