Scribd Logo
Upload

Welcome to Scribd!

  • 30 views

    Event Handling in Javascript

    Uploaded by

    ganesh170419
    The document discusses JavaScript event handling. It defines what an event is and provides examples of common HTML events like clicking or changing an input field. It explains that JavaScript can execute code when these events are detected by adding event handler attributes and code to HTML elements. The document also lists some of the most commonly used event types like mouse, keyboard, form and document/window events.

    Copyright:

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

    Event Handling in Javascript

    Uploaded by

    ganesh170419
    30 views10 pages
    The document discusses JavaScript event handling. It defines what an event is and provides examples of common HTML events like clicking or changing an input field. It explains that JavaScript can execute code when these events are detected by adding event handler attributes and code to HTML elements. The document also lists some of the most commonly used event types like mouse, keyboard, form and document/window events.

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses JavaScript event handling. It defines what an event is and provides examples of common HTML events like clicking or changing an input field. It explains that JavaScript can execute code when these events are detected by adding event handler attributes and code to HTML elements. The document also lists some of the most commonly used event types like mouse, keyboard, form and document/window events.

    Copyright:

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

    Event Handling in Javascript

    Uploaded by

    ganesh170419
    The document discusses JavaScript event handling. It defines what an event is and provides examples of common HTML events like clicking or changing an input field. It explains that JavaScript can execute code when these events are detected by adding event handler attributes and code to HTML elements. The document also lists some of the most commonly used event types like mouse, keyboard, form and document/window events.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 10

    Java script Event Handling

    An HTML event can be something the browser does, or something a user does.

    Here are some examples of HTML events:

    •An HTML web page has finished loading


    •An HTML input field was changed
    •An HTML button was clicked

    Often, when events happen, you may want to do something.

    JavaScript lets you execute code when events are detected.

    HTML allows event handler attributes, with JavaScript code, to be added to


    HTML elements.
    The change in the state of an object is known as an Event. In html, there are
    various events which represents that some activity is performed by the user
    or by the browser.

    When java script code is included in HTML, js react over these events and
    allow the execution. This process of reacting over the events is called Event
    Handling. Thus, js handles the HTML events via Event Handlers.

    For example, when a user clicks over the browser, add js code, which will
    execute the task to be performed on the event.

    Most oftenly used events are: Mouse Events, Keyboard Events,


    Document/Window Event, Form Events
    Event Performed Event Handler Description

    click onclick When mouse click on an element


    When the cursor of the mouse comes over
    mouseover onmouseover
    the element
    When the cursor of the mouse leaves an
    mouseout onmouseout
    element
    When the mouse button is pressed over the
    mousedown onmousedown
    element
    When the mouse button is released over the
    mouseup onmouseup
    element
    mousemove onmousemove When the mouse movement takes place.
    Event Performed Event Handler Description
    When the user press
    Keydown & Keyup onkeydown & onkeyup and then release the
    key

    Event Performed Event Handler Description


    focus onfocus When the user focuses on an element
    submit onsubmit When the user submits the form
    When the focus is away from a form
    blur onblur
    element
    When the user modifies or changes the
    change onchange
    value of a form element
    Event Performed Event Handler Description
    When the user focuses on an
    focus onfocus
    element
    submit onsubmit When the user submits the form
    When the focus is away from a form
    blur onblur
    element
    When the user modifies or changes
    change onchange
    the value of a form element
    <!DOCTYPE html>
    <html>
    <body>

    <button onclick="document.getElementById('demo').innerHTML=Date()">
    Date and Time
    </button>

    <p id="demo"></p>

    </body>
    </html>
    Drag n Drop
    <!DOCTYPE HTML> <script>
    <html> function allowDrop(ev) {
    <head> ev.preventDefault();
    <style> }
    #div1 {
    width: 350px; function drag(ev) {
    height: 70px; ev.dataTransfer.setData("text", ev.target.id);
    padding: 10px; }
    border: 1px solid #aaaaaa;
    } function drop(ev) {
    </style> ev.preventDefault();
    var data = ev.dataTransfer.getData("text");

    ev.target.appendChild(document.getElementById(data));
    }
    </script>
    </head>
    <body>

    <p>Drag the image into the rectangle:</p>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>


    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br>
    <div id="drag1" draggable="true" ondragstart="drag(event)" >Sri Harsha</div>
    <div id="drag2" draggable="true" ondragstart="drag(event)" >Mohan Krishna</div>
    <div id="drag3" draggable="true" ondragstart="drag(event)" >Hari </div>

    </body>
    </html>

    You might also like