JavaScript onmouse Events

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

JavaScript onmouse events are:

• onmouseover and onmouseout
• onmouseup and onmousedown
• onmouseenter and onmouseleave

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: