Chapter 14: DHTML: Event Model

1
Chapter 14 DHTML Event Model

• CIS 275Web Application Development for Business I

2
Event onclick

• When the user clicks an item with the mouse, the
  onclick event ______.
• Using the _____ property of the script element
• ltscript type "text/javascript" for "para"
• event "onclick"gt
• alert( "Hi there" )
• lt/scriptgt
• ltp id "para"gtClick on this text!lt/pgt
• _______ scripting
• ltinput type "button" value "Click Me!"
• onclick "alert( 'Hi again' )" /gt

3
Event onload

• The onload event fires when an element finishes
  loading successfully, including its _________.
• lthtml xmlns "http//www.w3.org/1999/xhtml"gt
• ltheadgt
• lttitlegtEvent onloadlt/titlegt
• ltscript type "text/javascript"gt
• var seconds 0
• function startTimer()
• window.setInterval(
  "updateTime()", 1000 )

• function updateTime()
• seconds
• soFar.innerText seconds
• lt/scriptgt
• lt/headgt
• ltbody onload "startTimer()"gt
• ltpgtSeconds you have spent
  viewing this page so far
• ltstrong id "soFar"gt 0 lt/stronggtlt/pgt
• lt/bodygt
• lt/htmlgt

4
Error Handling w/ onerror

• The content of web pages changes over time.
• Error messages presented by the browser can be
  confusing.
• Scripts can use the onerror event to execute
  specialized error-handling code.
• Such code may only work correctly if Script
  debugging is disabled in Internet Explorer.

• window.onerror handleError
• function doThis()
• alrrt( "hi" ) // error
• function handleError( errType, errURL, errLineNum
  )
• window.status "Error " errType
  " on line " errLineNum
• // Returning a value of true
• // cancels the browsers reaction.
• return true

5
Event onmousemove

• Event onmousemove fires repeatedly whenever the
  mouse moves.
• lthtml xmlns "http//www.w3.org/1999/xhtml"gt
• ltheadgt
• lttitlegtonmousemove eventlt/titlegt
• ltscript type "text/javascript"gt
• lt!--
• function updateMouseCoordinates()
  
• coordinates.innerText
  event.srcElement.tagName
• " (" event.offsetX ", "
  event.offsetY ")"
• // --gt
• lt/scriptgt
• lt/headgt

• ltbody style "background-color wheat"
  onmousemove "updateMouseCoordinates()"gt
• ltspan id "coordinates"gt (0, 0)lt/spangtltbr
  /gt
• ltimg src "deitel.gif"
• style "position absolute
• top 100 left 100"
• alt "Deitel" /gt
• lt/bodygt
• lt/htmlgt

6
Rollovers w/ onmouseover and onmouseout

• When a mouse cursor moves over an element, the
  onmouseover event fires.
• When a mouse cursor leaves an element, the
  onmouseout event fires.
• Creating _______ objects for rollovers
• captionImage1 new Image()
• captionImage1.src "caption1.gif"
• captionImage2 new Image()
• captionImage2.src "caption2.gif"

7
Logic for onmouseover/out

• Image object is associated with an image ______
• ltimggt tag has a src and an ____
• When any mouseover or mouseout occurs, call the
  appropriate function
• In that function, if event was for that ltimggt id,
  set the _____ for that image to the image object
• See p. 460 for example.

8
Form Processing

• The onfocus event fires when an element (e.g., a
  form field) is made active by a click or a
  ______.
• The onblur event fires when an element loses
  _______.
• onfocus and onblur can be used to call a function
• onfocus aFunction()
• onblur anotherFunction()
• onblur is especially helpful to _________ user
  input in a form field.
• The onsubmit and onreset events fire when the
  Submit or Reset buttons are clicked,
  respectively.
• onsubmit is useful for confirming submission.