Mouse Events in HTML5

How to use the Mouse Events in HTML

Events

Events are used to perform the click functions or trigger actions in HTML

Mouse Events

Mouse events perform different types of events

onclick events

 <h2> click on the button to open the value</h2>
    <button onclick="myfunction()">Click ME</button>
    <p id="demo"></p>
    <p>manideep sudheer</p>
<script>
    function myfunction() {
        document.getElementById("demo").innerHTML = "helloTechFunda";
    }
</script>

In the above code snippet we have defined the onclick function
The onclick as myfunction with id as demo which calls the predefined function as id demo with the value hello techfunda
When we click the button it displays the clickable function as hello techfunda with the given value

output

Ondouble click events

It is used to double click the events

 <h2> Double click on the button to open the value</h2>
    <button ondblclick="myfunction()">Click ME</button>
    <p id="demo"></p>
    <p>manideep sudheer</p>
<script>
    function myfunction() {
        document.getElementById("demo").innerHTML = "Learn tutorials in techfunda";
    }
</script>

ondblclick

In the above code snippet we have defined the double click of the functions
The button element with ondblclick function as myfunction and p tag with the demo,
Function as myfunction with the predefined the function as demo and value as learn tutorials in techfunda

output

Mouse down and Mouse up

It is used to mouse down and mouse up functions which are used to change the functions when the mouse is placed on the function up or down

  <h2> click the text to change the color of the text </h2>
    <p id="demo" onmousedown="mouseDown()" onmouseup="mouseUp()">
     TechFunda is a online tutorials
    </p>

    <script>
        function mouseDown() {
            document.getElementById("demo").style.color = "blue";
        }

        function mouseUp() {
            document.getElementById("demo").style.color = "lime";
        }
    </script>

Mouse down and Mouse up

In the above code snippet we have two functions mouse up and mouse down.
It change the color of the text when the the mouse is placed up or down
It turns the color of the text to the blue and lime

output

Mouse move and mouse out

It is used to move the mouse to zoom the image when the mouse is moved on it and the image is is normal when the mouse is out

<h2><i>PLace the corsor on the image to change the image</i></h2>
    <img onmousemove="bigImg(this)" onmouseout="normalImg(this)" src="images/KidsFundaLoga.png">

    <p>Techfunda is the best online tutorials </p>
    <p></p>

    <script>
        function bigImg(x) {
            x.style.height = "164px";
            x.style.width = "640px";
        }

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

Mouse move and mouse out

In the above code snippet we have defined the mouse move and mouse out
It is used to change the image when the mouse is placed on it and gets its normal image when the mouse is out from the image
The two functions as big image and normal image, we have given the big image to the mouse mov and normal image to the mouse out functions

Output

Onscroll

It is used to make the page scroll bu using HTML

 <p style="color:green;font-size:30px">Scroll the mouse to change the color</p>

    <div id="myDIV" onscroll="myFunction()">
       Techfunda is a online tutorials for the beginers and dotnetfunda is an online tutorials to learn and share the knowledge with eachother
    </div>

    <script>
        function myFunction() {
            document.getElementById("myDIV").style.color = "blue";
        }
    </script>

Onscroll

In the above code snippet we have the function onscroll which is used to scroll the page
The div id= myDIV and function as myfunction in which we are declaring the onscroll mouse function as color blue
The onscroll function as myfunction calls the script function to change the color of the text when the mouse is pointed on the text in scroll box

output