Skip to content
Advertisements

JavaScript onmouseup Event

Why onmouseup ?

The JavaScript onmouseup feature works when the user pulls his hand from the mouse button.

Syntax:

HTML Attribute<element onmousedown = “handler(event)“>
Event Propertyobject.onmousedown = handler;
attachEvent Methodobject.attachEvent(“onmousedown“, handler)
addEventListener Methodobject.addEventListener(“mousedown“, handler, useCapture)

onmouseup Examples

Example 1

onmouseup example 1
<body>

    <div id="box" onmousedown="downFunction()" onmouseup="upFunction()"></div>

    <script>

        function downFunction() {
            document.getElementById("box").style.transform = "rotate(10000deg)"
        }

        function upFunction() {
            document.getElementById("box").style.transform = "rotate(0deg)"
        }

    </script>
</body>

Example 2

onmouseup 2
<body>

    <div id="box"></div>

    <script>

        let box = document.getElementById("box");

        box.onmousedown = function(){
            box.style.transform = "rotate(10000deg)"
        }

        box.onmouseup = function () {
            box.style.transform = "rotate(0deg)"
        }

    </script>
</body>

Example 3

onmouseup example 3
<body>

    <div id="box"></div>

    <script>

        let box = document.getElementById("box");
        box.addEventListener("mousedown", downFunction);
        box.addEventListener("mouseup", upFunction);

        function downFunction(){
            box.style.transform = "rotate(10000deg)"
        }

        function upFunction() {
            box.style.transform = "rotate(0deg)"
        }

    </script>
</body>

Example 4

onmouseup example 4
<body>

    <div id="box"></div>

    <script>

        let box = document.getElementById("box");
        box.addEventListener("mousedown", downFunction);
        box.addEventListener("mouseup", upFunction);

        function downFunction(){
            box.style.background = "orange"
        }

        function upFunction() {
            box.style.background = "green"
        }

    </script>
</body>

Example 5

onmouseup example 5
<body>

    <div id="txt">
        HTML is the markup language that we use to structure and <br />
        give meaning to our web content, for example defining <br />
        paragraphs, headings, and data tables, or embedding <br />
        images and videos in the page.<br />
        CSS is a language of style rules that we use to apply <br />
        styling to our HTML content, for example setting <br />
        background colors and fonts, and laying out our <br />
        content in multiple columns.<br />
        JavaScript is a scripting language that enables <br />
        you to create dynamically updating content, control <br />
        multimedia, animate images, and pretty much <br />
        everything else. (Okay, not everything, but it <br />
        is amazing what you can achieve with a few lines <br />
        of JavaScript code.)
    </div>

    <script>

        let txt = document.getElementById("txt");

        txt.onmousedown = function () {
            txt.style.color = "red";
        };

        txt.onmouseup = function () {
            txt.style.color = "green";
        };

    </script>
</body>
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: