Scribd Logo
Carica

Benvenuto in Scribd!

  • DHTML - HTML Events HTML Events Can Trigger Actions in A Browser

    Caricato da

    direction2001
    210 visualizzazioni4 pagine

    Titolo originale

    3_DHTML Events

    Copyright

    © © All Rights Reserved

    Formati disponibili

    DOCX, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    © All Rights Reserved
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    210 visualizzazioni4 pagine

    DHTML - HTML Events HTML Events Can Trigger Actions in A Browser

    Caricato da

    direction2001

    Copyright:

    © All Rights Reserved
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 4

    DHTML - HTML Events

    HTML events can trigger actions in a browser.

    HTML Events

    Every element on an HTML page has events which can trigger a JavaScript.

    For example, we can use the onClick event of a button element to indicate that a
    function will run when a user clicks on the button. We define the events in the
    HTML tags.

    Examples of events:

     A mouse click
     A web page or an image loading
     Mousing over a hot spot on the web page
     Selecting an input field in an HTML form
     Submitting an HTML form
     A keystroke

    In the following example, the content of the h1 element will change when a user
    clicks on it:

    Example

    <html>
    <body>
    <h1 onclick="this.innerHTML='Ooops!'">Click on this text</h1>

    </body>
    </html>

    1|Page Disha Verma


    Event Listener

    Triggering of an Event

    Handling the Event through Event


    Handler

    Handling event using even handler


    <html>
    <head>
    <script>
    function myFunction()
    {
    var x = document.getElementById("fname");
    x.value = x.value.toUpperCase();
    }
    </script>
    </head>
    <body>
    Enter your name: <input type="text" id="fname" onchange="myFunction()">
    <p>When you leave the input field, a function is triggered which transforms the input text to upper
    case.</p>
    </body>
    </html>
    Linking Event Listener to Event Handler

    addEventListener Method

     The addEventListener() method attaches an event handler to the specified element.


     The addEventListener() method attaches an event handler to an element without overwriting
    existing event handlers.
     You can add many event handlers to one element.
     You can add many event handlers of the same type to one element, i.e two "click" events.

    2|Page Disha Verma


    Syntax
    element.addEventListener(event, function, useCapture);

     The first parameter is the type of the event (like "click" or "mousedown").
     The second parameter is the function we want to call when the event occurs.
     The third parameter is a boolean value specifying whether to use event bubbling or event
    capturing. This parameter is optional.
     Note that you don't use the "on" prefix for the event; use "click" instead of
    "onclick".

    Adding Event Listener to handler


    <html>
    <body>
    <p>This example uses the addEventListener() method to add many events on the same button.</p>
    <button id="myBtn">Try it</button>
    <p id="demo"></p>
    <script>
    var x = document.getElementById("myBtn");
    x.addEventListener("mouseover", myFunction);
    x.addEventListener("click", mySecondFunction);
    x.addEventListener("mouseout", myThirdFunction);
    x.addEventListener("click", myFinalFunction);
    function myFunction() {
    document.getElementById("demo").innerHTML += "Moused over!<br>";
    }
    function mySecondFunction() {
    document.getElementById("demo").innerHTML += "Clicked!<br>";
    }
    function myThirdFunction() {
    document.getElementById("demo").innerHTML += "Moused out!<br>";
    }
    function myFinalFunction() {
    document.getElementById("demo").innerHTML += "Clicked Again!<br>";
    }
    </script>
    </body>
    </html>
    Event Bubbling or Event Capturing?
    There are two ways of event propagation in the HTML DOM, bubbling and capturing.

    3|Page Disha Verma


    Event propagation is a way of defining the element order when an event occurs. If you have a <p>
    element inside a <div> element, and the user clicks on the <p> element, which element's "click" event
    should be handled first?
    In bubbling  the inner most element's event is handled first and then the outer: the <p> element's click
    event is handled first, then the <div> element's click event.In capturing  the outer most element's event
    is handled first and then the inner: the <div> element's click event will be handled first, then the <p>
    element's click event.
    With the addEventListener() method you can specify the propagation type by using the "useCapture"
    parameter:
    addEventListener(event, function, useCapture);
    The default value is false, which will use the bubbling propagation, when the value is set to true, the
    event uses the capturing propagation.

    4|Page Disha Verma

    Potrebbero piacerti anche