Scribd Logo
Upload

Welcome to Scribd!

  • 10 views

    Slide13 Events

    Uploaded by

    Pro Unipadder
    This document discusses different types of events in web development like keyboard, mouse, focus, and load events. It explains that events occur from user interaction and are handled by associating an event handler function to perform actions. Various events are described along with examples of how to attach event handlers to trigger code execution in response to events.

    Copyright:

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

    Slide13 Events

    Uploaded by

    Pro Unipadder
    10 views16 pages
    This document discusses different types of events in web development like keyboard, mouse, focus, and load events. It explains that events occur from user interaction and are handled by associating an event handler function to perform actions. Various events are described along with examples of how to attach event handlers to trigger code execution in response to events.

    Original Title

    Slide13_Events

    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 types of events in web development like keyboard, mouse, focus, and load events. It explains that events occur from user interaction and are handled by associating an event handler function to perform actions. Various events are described along with examples of how to attach event handlers to trigger code execution in response to events.

    Copyright:

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

    Slide13 Events

    Uploaded by

    Pro Unipadder
    This document discusses different types of events in web development like keyboard, mouse, focus, and load events. It explains that events occur from user interaction and are handled by associating an event handler function to perform actions. Various events are described along with examples of how to attach event handlers to trigger code execution in response to events.

    Copyright:

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

    Events

    13

    Session 11
    (slot 20-21)
    Objectives
    ◼ Explain Events and Event Handler.
    ◼ Do exercises
    Event
    ◼ An event occurs when the user interacts with the web
    page. Some of the commonly generated events are
    mouse clicks, key strokes, and so on.
    ◼ The process of handling these events is known as event
    handling. Event handling is process of specifying actions
    to be performed when an event occurs. This is done by
    using an event handler.
    ◼ The event handler is a scripting code or a function that
    defines the actions to be performed when the event
    triggered.
    ◼ When an event occurs, an event handler function that is
    associated with the specific event is invoked.
    Event Bubbling
    ◼ Event bubbling is a mechanism that allows you to
    specify a common event handler for all child
    elements. This means that the parent element
    handles all events generated by the child elements.
    ◼ Life circle of an event:
    1. The user performs an action to raise an event.
    2. The event object is updated to determine the
    event state.
    3. The event is fired.
    4. The event bubbling occurs as the event
    bubbles through the elements of the
    hierarchy.
    5. The event handler is invoked that performs
    the specified actions.
    Keyboard Event
    ◼ Keyboard events are the events that occur when a
    key or a combination of keys are pressed or released
    from a keyboard. Theses events occur for all keys of
    keyboard.

    ◼ Some keyboard events:


    ◼ onKeyDown: Occurs when a key is pressed down.
    ◼ onKeyUp: Occurs when a key is released.
    ◼ onKeyPress: Occurs when a key is pressed and released.
    keyboard event - Demo
    Mouse Event
    ◼ Mouse events are the events that occur when the user
    uses mouse on the elements.
    ◼ Some mouse events:
    ◼ onMouseDown: Occurs when the mouse button is pressed.
    ◼ onMousUp: Occurs when the mouse button is released.
    ◼ onMouseClick: Occurs when the mouse button is clicked.
    ◼ onDblClick: Occurs when the mouse button is double-clicked.
    ◼ onMouseMove: Occurs when the mouse pointer is moved from
    one location to other.
    ◼ onMouseOver: Occurs when the mouse pointer is moved over
    element.
    ◼ onMouseOut: Occurs when the mouse pointer is moved out of
    the element.
    mouse event - Demo

    Demo: S13_KeyboardEvent.html
    Focus and selection Event
    ◼ The focus events determine the activation of various
    elements that use the INPUT element. It allows you to
    set or reset focus for different INPUT elements.
    ◼ The selection events occur when an element is selected.
    ◼ Some events:
    ◼ onFocus: Occurs when an element receives focus.
    ◼ onBlur: Occurs when an element loses the focus.
    ◼ onSelectStart: Occurs when the selection of an element
    starts.
    ◼ onSelect: Occurs when the present selection changes.
    ◼ onDragStart: Occurs when the selected element is moved.
    Focus event - Demo
    Onload/onunload event - Demo
    Onchange event - Demo
    Summary
    ◼ Event occur when the user interacts the web
    page
    ◼ The process of handling these events is known
    event – handling.
    ◼ Event – handling is a process of specifying
    actions to be performed when an event occurs.
    exercise

    Html code
    exercise Css code
    exercise
    JavaScript code: review examples in session 9

    You might also like