Skip to content
Advertisements

JavaScript onmousedown Event

Why onmousedown ?

The JavaScript onmousedown property takes place when an item is pressed. onclick is similar to property but not the same. After pressing onclick, the codes will work. In the onmousedown property, the codes will run during the time they are pressed.

Syntax:

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

onmousedown Examples

Example 1

onmousedown example 1
<body>

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

    <script>

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

    </script>
</body>

Example 2

onmousedown example 2
<body>

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

    <script>

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

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

    </script>
</body>

Example 3

onmousedown example 3
<body>

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

    <script>

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

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

    </script>
</body>

Example 4

onmousedown example 4
<body>

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

    <script>

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

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

    </script>
</body>

Example 5

onmousedown 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: