Scribd Logo
Upload

Welcome to Scribd!

  • 6 views

    JavaScriptEvents&Examples

    Uploaded by

    vinothchintam12

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd

    JavaScriptEvents&Examples

    Uploaded by

    vinothchintam12
    6 views8 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    6 views8 pages

    JavaScriptEvents&Examples

    Uploaded by

    vinothchintam12

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    You are on page 1of 8

    <!

    -- 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="images12.jpg" height=100 width=100 onclick="ff()">
    <script>
    function ff() {
    document.all.img1.width = 500;
    document.all.img1.height = 500;
    }
    </script>
    </body>S</html>

    <!-- 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>

    <!--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>

    <!--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>

    <!-- 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>

    <!-- 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>

    <!-- 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>

    <!-- 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>

    <!-- 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 ABC.
    </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>

    <!-- 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>

    <!-- 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>

    <!-- 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>
    <!--
    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>

    <!-- 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>

    <!-- 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>

    <!-- 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>

    <!-- 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>

    You might also like