Skip to content
Advertisements

JavaScript Events – Mouse

onMouseOver

With the mouse to point on the element.

<div id="box" style="width:200px;height:200px;border:2px solid #262626"></div>
<p id="text"></p>

    <script>

        x = document.getElementById("box");
        x.onmouseover = function () {
            document.getElementById("text").innerHTML = "mouse inside the box";
        }
    </script>

onmouseout

is the event of withdrawal from the mouse.

 <div id="box" style="width:200px;height:200px;border:2px solid #262626"></div>
<p id="text"></p>

    <script>
        x = document.getElementById("box");
        x.onmouseout = function () {
            document.getElementById("text").innerHTML = "mouse outside the box";
        }
    </script>

onMouseMove

Move the mouse cursor.(in box).

    <div id="box" style="width:200px;height:200px;border:2px solid #262626"></div>
<p id="text"></p>

    <script>

        x = document.getElementById("box");
        x.onmousemove = function () {
            document.getElementById("text").innerHTML = "moving in the box";
        }

    </script>

onMouseDown / onMouseUp

onmousedown: Pressing the left mouse button on the element is the event. The corresponding function works as soon as the key comes down.

onmouseup: Left mouse button is pressed and left on the element. It does not work when the mouse button is down, it works when the key is released.

<input type="button" id="box" value="show"></input>
<p id="text"></p>

    <script>

        x = document.getElementById("box")
        x.onmouseup = function () {
            document.getElementById("text").innerHTML = "mouse button pressed."
        }
        x.onmousedown = function () {
            document.getElementById("text").innerHTML = "left mouse button."
        }

    </script>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: