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.