Scribd Logo
Upload

Welcome to Scribd!

  • 40 views

    Event Programs Js

    Uploaded by

    Archit Tharwani
    This document discusses different event handling programs in HTML and JavaScript, including onclick, onmouseover, onload, onfocus, onblur, mouseout, onchange, and keyup events. It provides code snippets that demonstrate how each event works, such as changing text or background colors when a user clicks, hovers over, focuses on, or types into an element.

    Copyright:

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

    Event Programs Js

    Uploaded by

    Archit Tharwani
    40 views4 pages
    This document discusses different event handling programs in HTML and JavaScript, including onclick, onmouseover, onload, onfocus, onblur, mouseout, onchange, and keyup events. It provides code snippets that demonstrate how each event works, such as changing text or background colors when a user clicks, hovers over, focuses on, or types into an element.

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document discusses different event handling programs in HTML and JavaScript, including onclick, onmouseover, onload, onfocus, onblur, mouseout, onchange, and keyup events. It provides code snippets that demonstrate how each event works, such as changing text or background colors when a user clicks, hovers over, focuses on, or types into an element.

    Copyright:

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

    Event Programs Js

    Uploaded by

    Archit Tharwani
    This document discusses different event handling programs in HTML and JavaScript, including onclick, onmouseover, onload, onfocus, onblur, mouseout, onchange, and keyup events. It provides code snippets that demonstrate how each event works, such as changing text or background colors when a user clicks, hovers over, focuses on, or types into an element.

    Copyright:

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

    Some Important Event Handling Programs

    Onclick: When a user clicks on a button or inputs it occurs.

    <!doctype html>
    <html>
    <head>
    <script>
    function hello()
    {
    alert('Hello World!');
    }
    </script>
    </head>

    <body>
    <button type="button" onclick="hello()">Please click here! </button>
    </body>

    </html>

    Onmouseover: When a user mouses over on the button.

    <!DOCTYPE html>

    <html>
    <body>
    <h1 id="demo">Test Mouse over me</h1>
    <script>
    document.getElementById("demo").onmouseover = function(){mouseOver()};
    function mouseOver()
    {
    document.getElementById("demo").style.color = "Purple";
    }

    </script>

    </body>

    </html>
    Onload: When your page loads, it performs accordingly.

    <!DOCTYPE html>

    <html>
    <body onload="checkyourCookies()">
    <p id="OnloadTest"></p>
    <script>
    function checkyourCookies()
    {
    var text = "";

    if (navigator.cookieEnabled == true)
    {
    text = "your web page Cookies are active.";
    }
    else
    {
    text = "your web page Cookies are not active.";
    }
    document.getElementById("OnloadTest").innerHTML = text;
    }

    </script>
    </body>
    </html>

    Onfocus: Certain scenarios when a user keeps the cursor in a form field.

    <!DOCTYPE html>
    <html>
    <body>
    <p>This is the best scenario to uses the addEventListener() function to
    attach a "focus" event to an input element box.</p>
    Enter your First name: <input type="text" id="Firstname">
    <script>
    document.getElementById("Firstname").addEventListener("focus",
    myFunction);
    function myFunction()
    {
    document.getElementById("Firstname").style.backgroundColor =
    "yellow";
    }
    </script>
    </body>
    </html>
    Onblur: If a particular form field leaves within it.

    <!DOCTYPE html>
    <html>
    <body>
    <p>This code snippet uses the addEventListener() method and performs a
    "blur" event to an input element.</p>
    <p>please write something and see the result (blur).</p>
    <input type="text" id="fname">
    <script>
    document.getElementById("fname").addEventListener("blur",
    myFunction);
    function myFunction()
    {
    alert("your Input element lost focus.");
    }
    </script>
    </body>
    </html>

    Mouseout event

    <!DOCTYPE html>

    <html>
    <body>
    <h1 id="demo">Test Mouse over me</h1>
    <script>
    document.getElementById("demo").onmouseout = function() {mouseOut()};
    function mouseOut()
    {
    document.getElementById("demo").style.color = "Red";
    }
    </script>
    </body>
    </html>
    Onchange event

    <!DOCTYPE html>

    <html>
    <body>
    Please Enter name: <input type="text" id="Firstname">
    <script>
    document.getElementById("Firstname").onchange = function() {myFunction()};
    function myFunction()
    {
    var x = document.getElementById("Firstname");
    x.value = x.value.toLowerCase();
    }

    </script>
    </body>
    </html>

    Keyup event

    <!DOCTYPE html>
    <html>
    <body>
    Enter your First name: <input type="text" id="firstname"
    onkeyup="myKeyUpFunction()"/>
    <p>My First name is: <span id="Test"></span></p>
    <script>

    function myKeyUpFunction()
    {
    var input = document.getElementById("firstname").value;
    document.getElementById("Test").innerHTML = input;
    }
    </script>

    </body>
    </html>

    You might also like