Examples of JavaScript Events

Examples of JavaScript Events

In this article, I am going to discuss Examples of JavaScript Events Types. Please read our previous article where we discussed JavaScript Events basics. At the end of this article, you will understand the examples of different Types of JavaScript Events.

Mouse events

Mouse Click Event:

When mouse is click on an element. Following is an example of JavaScript mouse click event:

<html>
<head>
    <title>Click events </title>
</head>
<body bgcolor=green text="yellow">
    <h4 align=center> Please Click the mouse on Image</h4>
    <blockquote> The height & width of Image will get   increased</blockquote>
    <img id="img1" src="C:\Users\HP PC\Desktop\tweety.jpg" height=100 width=100 onclick="ff()">

    <script>
        function ff() {
            document.all.img1.width = 500;
            document.all.img1.height = 500;
        }
    </script>
</body>S</html>

Output:

JavaScript Mouse Click Event

JavaScript Mouse Click Event Example

Mouse down event:

When the mouse button is pressed over the element. Following is the example to understand this event.

<html>
<head>
    <title>Onmousedown events </title>
</head>

<body bgcolor=green text="white" onmousedown="ff()">

    <h4 align=center> Please click on the web page anywhere you want</h4>
    <script>
        function ff() {
            alert("You clicked at : X " + event.screenX + " Y: " + event.screenY)
        }
    </script>
</body>
</html>

Output:

JavaScript Mousedown event

JavaScript Mousedown event Example

Mouse move event:

The following is an example of mousemove event.

<html>
<head>
    <title>Onmousemove events </title>
</head>

<body bgcolor=green text="white" onmousemove="ff()">

    <h4 align=center>Please move the mouse</h4>
    <blockquote>
        The X axis and Y axis position of Cursor on screen will be displayed in textbox
    </blockquote>

    name : <input type="text" name="t1" onkeydown="ff()">
    <script>
        function ff() {
            document.all.t1.value = "X: " + event.screenX + " Y: " + event.screenY
        }
    </script>
</body>
</html>

Output:

JavaScript Mouse move event

Mouse out event:

When the cursor of the mouse leaves an element. The following is an example of Mouseout event.

<html>
<head>
    <title>Onmouseout events </title>
</head>

<body bgcolor=green text="white">

    <h4 align=center>Please bring your mouse over the image and remove it</h4>
    <img id="img1" src="C:\Users\HP PC\Desktop\tweety.jpg" height=200 width=200 onmouseover="ff()" onmouseout="ff1()" />

    <script>
        function ff() {
            document.all.img1.width = "190"
            document.all.img1.height = "190"
        }
        function ff1() {
            document.all.img1.width = "300"
            document.all.img1.height = "300"
        }
    </script>
</body>
</html>

Output:

JavaScript Mouse out event

Mouse over event:

When the cursor of the mouse comes over the element. The following is an example of mouseover event.

<html>
<head>
    <title>Onmouseover events </title>
</head>

<body bgcolor=green text="white">

    <h4 align=center>Please bring your mouse over the image</h4>
    <img id="img1" src="C:\Users\HP PC\Desktop\tweety.jpg" height=200 width=200 onmouseover="ff()" />

    <script>
        function ff() {
            document.all.img1.width = "180"
            document.all.img1.height = "180"
        }
    </script>
</body>
</html>

Output:

JavaScript Mouse over event

Mouseup event:

When the mouse button is released over the element . The following is an example of mouseup event.

<html>
<head>
    <title>Onmouseup events </title>
</head>

<body bgcolor=green text="white" onmousedown="ff()" onmouseup="ff1()">

    <h4 align=center>Please Drag the mouse on the web page anywhere you want</h4>

    <script>
        var x, y, x1, y1
        function ff() {
            x = event.screenX
            y = event.screenY
        }
        function ff1() {
            x1 = event.screenX
            y1 = event.screenY
            alert("You brought mouse down at : X " + x + " Y: " + y + " and brought it up at X: " + x1 + " Y: " + y1)
        }
    </script>
</body>
</html>

Output:

JavaScript Mouseup event

Example of JavaScript Mouseup event

DOM / UI events

Load event:

This event is fired when the browser finishes the loading of the page. The example is given below for better understanding of load event.

<html>
<head>
    <title>OnLoad events </title>
</head>

<body bgcolor=green text=”white” onload="wel()">

    <marquee direction=up behavior=alternate scrollamount=5 size=0>
        <h1 align=center> Welcome </h1>
    </marquee>

    <script>
        function wel() {
            document.bgColor = 'yellow'
            document.fgColor = 'blue'
        }
    </script>
</body></html>

Output:

JavaScript Load event Example

Reset event:

The reset event is fired when the user clicks on the reset button on the form. Following is the example to understand the reset event.

<html>
<head>
    <title>Onreset events</title>
</head>

<body bgcolor=red text="white">
    <form name="Shagufta" onreset="alert('This form is being reseted')">

        Name : <input type="text" name=t1 id="tt1"> <br>
        Address : <input type="text" name=t2> <br>
        <input type="reset" name="b1"> <br>
    </form>
</body>
</html>

 

Output:

JavaScript Reset event

Example of JavaScript Reset event

Examples of JavaScript Events

Resize event:

This event is fired when the user resizes the window of the browser. The example is given below.

<html>
<head>
    <title>Onresize events</title>
</head>

<body bgcolor=blue text="white" onresize="pp()">
    <marquee direction=up behavior=alternate>
        These pages are Developed by Shagufta Chaudhari.
    </marquee>

    <h1>
        <marquee direction=right behavior=alternate>
            These pages are Developed by Shagufta Chaudhari-1.
        </marquee>
    </h1>

    <h1>
        If you minimize or maximize this page onresize event will be fired.
    </h1>

    <script>
        function pp() {
            var a = confirm("Really want to resize")
            if (a) {
                document.bgColor = 'red'
            }
            else {
                document.bgColor = 'green'
            }
        }
    </script>
</body>
</html>

Output:

JavaScript Resize event

JavaScript Resize event Example

Examples of Different JavaScript Events

Select event:

The select event is fired when input text is selected. For better understanding please have a look at the following example.

<html>
<head>
    <title>Onselect events</title>
</head>

<body bgcolor=blue text="white">

    <form name="Shagufta" onselect="alert('hi')">
        Name : <input type="text" name=t1 id="tt1"> <br>
        Address : <input type="text" name=t2> <br>
        Educational Qualification :
        <select>
            <option> 10th
            <option> 12th
            <option> Graduate
            <option> Post Graduate
            <option> PhD
        </select><br>
        Comments :<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<textarea rows=5 onselect="alert('yes delete this selected text')">
You can type this text and type your comments here
</textarea>
    </form>
    <script>
        function ff() {
            alert("The value being set is " + document.all.tt1.value)
        }
    </script>
</body>
</html>

Output:

JavaScript Select event

Submit event:

This event is fired when the user click on the submit button. Following is an example of submit event.

<html>
<head>
    <title>Onsubmit events</title>
</head>

<body bgcolor=red text="white">

    <form name="Shagufta" onsubmit="alert('got submitted')">
        Name : <input type="text" name=t1 id="tt1"> <br>
        Address : <input type="text" name=t2> <br>
        <input type="submit" name="b1"> <br>
    </form>
</body>
</html>

Output:

JavaScript Submit event

Unload event:

This event is fired when the user leaves the current webpage, the browser unloads it. The example is given below for better understanding.

<html>
<head>
    <title>Unload events</title>
</head>

<body bgcolor=green onload="wel()" onunload="thx()">

    <marquee direction=up behavior=alternate scrollamount=5 size=0>
        <h1 align=center> Welcome </h1>
    </marquee>

    <h1> Click on link to unload this page </h1>

    <a href='firstProgram.html'> hit me to unload this page </a>

    <script>
        function wel() {
            document.bgColor = 'yellow'
            document.fgColor = 'blue'
        }

        function thx() {
            alert("Thanx for visiting")
        }
    </script>
</body>
</html>

Output:

JavaScripy Unload event

Keyboard events

keydown event

This event fire when the user presses a key. Following is an example of keydown event.

<html>
<head>
    <title>onkeydown events </title>
</head>

<body bgcolor=green text=yellow>
    <h4 align=center> Type character in the textbox </h4>
    <blockquote> You will notice that the dialogbox appears   before the character appears in the textbox </blockquote>

    name : <input type="text" name="t1" onkeydown="ff()">

    <script>
        function ff() {
            alert("you pressed " + event.keyCode)
        }
    </script>
</body>
</html>

Output:

JavaScript keydown event

JavaScript keydown event Example

keypress event

This event fire when the user presses a key. Following is an example of keypress event.

<html>
<head>
    <title>onKeyPress events </title>
</head>

<body bgcolor=green text=yellow>

    <h4 align=center> Type character in the textbox </h4>
    <blockquote>
        You will notice that the dialogbox appears   before the character appears in the textbox
    </blockquote>

    name : <input type="text" name="t1" onkeypress="ff()">

    <script>
        function ff() {
            alert("ASCII Code of the key you pressed : " + event.keyCode)
        }
    </script>
</body>
</html>

Output:

JavaScript keypress event

JavaScript keypress event Example

keyup event:

The keyup event fire when the user released the key. Following is an example of keyup event.

<html>
<head>
    <title>onkeyup events </title>
</head>

<body bgcolor=green text=yellow>
    <h4 align=center> Type character in the textbox </h4>
    <blockquote>
        You will notice that the dialogbox appears before the character appears in the textbox
    </blockquote>

    name : <input type="text" name="t1" onkeydown="ff()">

    <script>
        function ff() {
            alert("ASCII Code of the key you pressed : "+   event.keyCode)
        }
    </script>
</body>
</html>

Output:

keyup event in JavaScript

Example of keyup event in JavaScript

Focus events

blur event:

The blur event will be fired when the user moves the focus away from a form element. For better understanding of this event, please have a look at the following example.

<html>
<head>
    <title>OnBlur events </title>
</head>

<body bgcolor=green text="white">

    <h3 align=center>
        <u>In this OnBlur example we used Javascript with in inverted quotes </u>
    </h3>
    <h4 align=center> just type text in text boxes and click on button</h4>
    Name :<input type="text" name="t1" id="tt1"
                 onblur="document.all.tt1.style.background ='red';
                 document.all.tt1.style.color='white'"> <br>

    Address : <input type="text" name="t2" id="tt2"
                     onblur="document.all.tt2.style.background ='red';
                     document.all.tt2.style.color='white'"> <br>
    <input type="button" value="Hit me" name="b1">

</body></html>

Output:

JavaScript blur event Example

focusin event:

The focusin event is fired when an element is about to receive focus. For better understanding of this event, please have a look at the following example.

<html>
<head>
    <title>onFocus events </title>
</head>

<body bgcolor=green text="white">

    <h3 align=center> In this example we used Javascript with in inverted quotes </h3>
    Name :<input type="text" name="t1" onFocus="alert('Name text Got Focus ')"> <br>
    Address : <input type="text" name="t2" onFocus="alert('Now focus is on second text box')"> <br>
</body>
</html>

Output:

Example of JavaScript focusin event

Here, in this article, I try to explain the Examples of JavaScript Events Types. I hope you enjoy this article. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

Your email address will not be published. Required fields are marked *