Scribd Logo
Upload

Welcome to Scribd!

  • Practsing Addeventlisner Method

    Uploaded by

    patilniraj277
    2 views3 pages
    dk djk dilk

    Original Title

    practsing addeventlisner method

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    dk djk dilk

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    2 views3 pages

    Practsing Addeventlisner Method

    Uploaded by

    patilniraj277
    dk djk dilk

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 3

    <!

    DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width, initial-
    scale=1.0">
    <title>prac event lisner</title>
    </head>

    <body>
    <button id="myButton">Click me</button>
    <div id="myDiv" style="width: 100px;
    height: 100px; background-color:
    lightblue;"></div>
    <input type="text" id="myInput">
    <form id="myForm">
    <input type="text" name="username">
    <input type="submit" value="Submit">
    </form>
    <button id="customButton">Trigger Custom
    Event</button>
    <script
    src="prac_event_lisner.js"></script>
    </body>

    </html>
    //Click Event
    document.getElementById("myButton").addEventL
    istener("click", function () {
    alert("Button clicked!");
    });
    //Mouseover Event
    document.getElementById("myDiv").addEventList
    ener("mouseover", function () {
    this.style.backgroundColor = "lightgreen";
    });
    //keydown event
    document
    .getElementById("myInput")
    .addEventListener("keydown", function
    (event) {
    console.log("Key pressed:", event.key);
    });
    //submit event
    document.getElementById("myForm").addEventLis
    tener("submit", function (event) {
    event.preventDefault(); // Prevents the
    default form submission
    alert("Form submitted!");
    });
    //window resize event
    window.addEventListener("resize", function ()
    {
    console.log("Window resized!");
    });
    //custom event
    document
    .getElementById("customButton")
    .addEventListener("customEvent", function
    () {
    alert("Custom event triggered!");
    });

    // Trigger the custom event programmatically


    document.getElementById("customButton").addEv
    entListener("click", function () {
    var customEvent = new Event("customEvent");
    document.getElementById("customButton").dis
    patchEvent(customEvent);
    });

    You might also like