Event Handling - PowerPoint PPT Presentation

Loading...

PPT – Event Handling PowerPoint presentation | free to view - id: 68fbe-ZDc1Z



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Event Handling

Description:

... the text field in the previous example, insert another text field ... onmouseover The onmouseover event is triggered when the mouse moves over an element. ... – PowerPoint PPT presentation

Number of Views:171
Avg rating:3.0/5.0
Slides: 28
Provided by: Sta4
Category:
Tags: event | handling

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Event Handling


1
Event Handling
2
Objectives
  • Using event handlers
  • Simulating events
  • Using event-related methods

3
Understanding event
  • An event includes
  • A. mouse movement
  • B. button click
  • C. keyboard press
  • D. looking at the web page
  • E. standing/sitting by/on your chair
  • F. all of the above

4
Understanding event
  • An event includes
  • A. mouse movement
  • B. button click
  • C. keyboard press
  • D. looking at the web page
  • E. standing/sitting by/on your chair
  • F. all of the above

5
But D, E can be events too. in the future
Gaze detection system
Body Posture Recognition
6
Understanding events
  • HTML form controls which of the following?
  • a. Selection menus
  • b. Push buttons
  • c. Text areas
  • d. All of the above

7
Understanding events
  • HTML form controls which of the following?
  • a. Selection menus
  • b. Push buttons
  • c. Text areas
  • d. All of the above

8
Understanding event handlers in Javascript
  • An event handler is a piece of JavaScript code
  • A. that runs when the mouse is clicked
  • B. that runs when a user finishes typing in a
    textbox
  • C. that runs when a user select an option from a
    listbox
  • D. All of the above

9
Understanding event handlers in Javascript
  • An event handler is a piece of JavaScript code
  • A. that runs when the mouse is clicked
  • B. that runs when a user finishes typing in a
    textbox
  • C. that runs when a user select an option from a
    listbox
  • D. All of the above

10
Understanding event handler in Javascript
  • From last lectures lab on images, how can we
    call the function (say randomImage()) every time
    a user moves a mouse out of the current image
  • ltimg name"display src"spring.jpg border0
    width"200" height"250" onMouseOverrandomImage(
    )gt
  • B. ltimg name"display src"randomImage()
    border0 width"200" height"250"gt
  • C. Putting onMouseOverrandomImage() inside the
    script
  • D. None of the above

11
Understanding event handler in Javascript
  • From last lectures lab on images, how can we
    call the function (say randomImage()) every time
    a user moves a mouse out of the current image
  • ltimg name"display src"spring.jpg border0
    width"200" height"250" onMouseOverrandomImage(
    )gt
  • B. ltimg name"display src"randomImage()
    border0 width"200" height"250"gt
  • C. Putting onMouseOverrandomImage() inside the
    script
  • D. None of the above

12
Events and Event Handlers
  • An event is the occurrence of a mouse click,
    mouse movement, button click, keyboard press or
    release, etc.
  • Events can be simulated or related to methods of
    form controls
  • An event handler is a piece of JavaScript code
    that runs when the event occurs
  • Event handlers are attached to HTML elements

13
Events and Event Handlers
  • An event is the occurrence of a mouse click,
    mouse movement, button click, keyboard press or
    release, etc.
  • Events can be simulated or related to methods of
    form controls
  • An event handler is a piece of JavaScript code
    that runs when the event occurs
  • Event handlers are attached to HTML elements

14
Events and Event Handlers
  • An event is the occurrence of a mouse click,
    mouse movement, button click, keyboard press or
    release, etc.
  • Events can be simulated or related to methods of
    form controls
  • An event handler is a piece of JavaScript code
    that runs when the event occurs
  • Event handlers are attached to HTML elements

15
Events and Event Handlers
  • An event is the occurrence of a mouse click,
    mouse movement, button click, keyboard press or
    release, etc.
  • Events can be simulated or related to methods of
    form controls
  • An event handler is a piece of JavaScript code
    that runs when the event occurs
  • Event handlers are attached to HTML elements

16
Events and Event Handlers (continued)
  • Using JavaScript events and event handlers, you
    can
  • create new instances of a browser window
  • open dialog boxes for message displays
  • allow the user to input information
  • process information in forms
  • run calculations
  • create animations

17
Creating Event Handler
  • Step 1 Assign event handler as an attribute of
    an HTML tag (document, form, link)
  • Step 2 Assign a value to the event handler
    (build-in method, user-defined function, or
    javascript statements)

18
Lab/Practice (onSubmit and onClick)
  • Step 1 Cut and paste this code (Week9.htm)
  • lthtmlgtltheadgtlttitlegtAn HTML Form and the onSubmit
    Event
  • Handlerlt/titlegt
  • ltscript language"JavaScript"gt
  • function checkForm(yourinfo)
  • // insert code here
  • lt/scriptgt lt/headgt ltbodygt ltbgt
  • lt!-- change the line below --gt
  • ltform name"info" method"post" gtltpgt
  • ltfont size"1"gtltpgt
  • Type your name here
  • ltinput type"text" name"namestring" size"50"gt
  • ltpgt
  • ltinput type"submit" value"Submit" gt
  • ltinput type"reset" value"Clear"gt
  • lt/formgt lt/bodygt lt/htmlgt

19
Lab/Practice
  • Step 2 Modify this function checkForm(yourinfo)
    to
  • - check if the user types in Netscape or
    netscape, use alert box to congratulate the
    user and return true
  • - Otherwise, use alert box to tell the user
    that Sorry, its not X (for example) and return
    false
  • Step 3 Locate the comment in HTML document that
    said change the line below, add this to the
    ltformgt tag
  • onSubmit"return checkForm(document.info)"

20
Lab/Practice
  • Step 4 delete this from the form tag.
  • onSubmit"return checkForm(document.info)"
  • And locate this line
  • ltinput type"submit" value"Submitgt
  • Insert this to the above ltinputgt tag
  • onClick"return checkForm(document.info)"
  • Step 5 What have we done?

21
Event handlers
  • onclick - The onclick event is triggered when an
    element, such as a button, is clicked.
  • onsubmit The onsubmit event is triggered when a
    form is submitted.

22
Lab/Practice (onFocus, onBlur)
  • Step 1Below the text field in the previous
    example, insert another text field
  • Step 2 Insert a functions in your script
  • function focusOnMe( )
  • document.bgColor"pink"

23
Lab/Practice (onFocus, onBlur)
  • Step 3 Insert another functions in your script
  • function defocusOnMe( )
  • document.bgColoryellow"
  • Step 4Insert to the newly added ltinputgt tag the
    following
  • onFocus "focusOnMe()" onBlur"deFocusOnMe()
  • Step 5 What happened?

24
Event handlers
  • onblur - The onblur event is triggered when an
    element that has focus (meaning it is selected)
    is about to lose focus because some other element
    is about to receive focus. The onblur event fires
    before the onfocus event of the next element

25
Event handlers
  • onfocus - The onfocus event is triggered when an
    element receives focus because it is currently
    selected or active. Typically an element receives
    focus after another element loses focus.

26
Event Handlers (continued)
  • onmouseout The onmouseout event is triggered
    when the mouse was over an element then moves
    away.
  • onmouseover The onmouseover event is triggered
    when the mouse moves over an element.

27
Lab/Practice
  • Step 1 Modify the previous practice so that
  • It has three textfields
  • one for name
  • one for phone number
  • one for address
  • Step 2 When a user focuses on each field, use
    onFocus event to change the background color
    randomly to one of these
  • pink, lightblue, lightgreen, and
    lightyellow
  • Step 3 When a user leaves each text field, use
    onBlur event to check if the user has entered
    anything on that respective field. If he did not,
    alert him to enter some data.
About PowerShow.com