Open In App
Related Articles

JavaScript onmouse Events

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The onmouse event is used to define the operation using the mouse.

JavaScript onmouse events are:

JavaScript onmouseover and onmouseout: The onmouseover and onmouseout events occur when the mouse cursor is placed over specific element

Example 1: These events do not require a mouse click to happen

HTML

<script type="text/javascript">
    function over()
    {
        document.getElementById('key').innerHTML=
    "Onmouseover event has occurred";
    }
    function out()
    {
        document.getElementById('key').innerHTML=
    "Onmouseout event has occurred";
    }
</script>
  
<h2 id="key" onmouseover="over()" onmouseout="out()">
    Original Text
</h2>

                    

Output:

 

JavaScript onmouseup and onmousedown:

Example: These events occur when a mouse click is encountered

javascript

<script type="text/javascript">
    function up()
    {
        document.getElementById("gfg").innerHTML="Welcome to GFG";
    }
    function down()
    {
        document.getElementById("gfg").innerHTML = "Goodbye";
    }
</script>
<p id="gfg" onmouseup="up()" onmousedown="down()">Hello</p>

                    

Output:

 

JavaScript onmouseenter and onmouseleave: The onmouseenter event occurs when the mouse is placed on the element and stays until the mouse is removed from the element onmouseleave event occurs as soon as the mouse is removed from the element

Example: These event do not require mouse click to happen

javascript

<script>
    function enter(){
            document.getElementById("gfg").innerHTML="Enter";
    }
    function leave(){
            document.getElementById("gfg").innerHTML = "Exit";
    }
</script>
<p id="gfg" onmouseenter="enter()" onmouseleave="leave()">
    Welcome to GFG
</p>

                    

Output:

 



Last Updated : 10 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads