Event Handling

1
Lesson 2

• Event Handling

2
Object Event Handlers

• Most of the objects that make up the Document
  Object Model respond to asynchronous, user
  generated events through predefined event
  handlers that handle the event and transfer
  control to a user provided event handling
  function
• Each object has particular events that they will
  respond to
• the way you specify an event handler is by adding
  an additional attribute to the HTML tag that
  specifies the event and the particular handler
• ltinput namebt1 typebutton valueok
  onClickacb( )gt
• if the button is click the function abc( ) will
  be run

3
Alert
The Alert function is useful in user
notification and debugging of Javascripts. Pops
up a message in a pop-up dialog box Ex,
alert(help, help, help)
4
Events

• onAbort
• onBlur
• onChange
• onClick
• onError
• onFocus
• onLoad
• onMouseOut
• onMouseOver
• onReset
• onSelect
• onSubmit
• onUnload

5
onAbort

• Activated when a user aborts the loading of an
  image

ltimg nameball srcimages/ball.gif
onAbortalert(You missed a nice picture)gt
6
onBlur

• Used with frame, select, text, textarea and
  window objects
• invoked when an object loses focus
• use with select, text and textarea for data
  validation

7
onChange

• Used with select, text and textarea objects
• use instead of onBlur to validate only if a value
  has changed

ltformgt Color ltselect onChangeprocessSelection()
gt ltoption valueRgtRed ltoption
valueGgtGreen ltoption valueBgtBlue lt/selectgt lt
/formgt
8
onClick

• Used with button, checkbox,link, radio, reset,
  and submit objects.

ltinput typebutton namebtn1 valueClick Me
onClickalert(button was clicked gt
9
onError

• Used with image and window objects to invoke a
  handler if an error occurs while an image or
  window is loading.
• Setting window.onerror null will prevent users
  from seeing JavaScript generated errors

10
onFocus

• Used with frame, select, text, textarea and
  window objects.
• Just the opposite of onBlur i.e. invoked when
  the object gets focus.

ltbody bgcolorlightgrey onBlurdocument.bgColor
black onFocusdocument.bgColorwhite gt
11
onLoad

• Used with window, frame and image objects (use
  with ltbody .gtltframeset .gt and ltimg ...gt)
• Activated when the body, frameset, or image is
  loaded

ltimg namespinball srcimages/spinball.gif
onLoadstartAnimation(this)gt
12
onMouseOut and onMouseOver

• Used with area and link objects
• user moves mouse off of an area or link

ltmap nameflowergt ltarea nametop
coords0,0,200,300 hrefjavascriptdisplayMessag
e() onMouseOverself.statuswhen you
see this message click your left mouse button
return true onMouseOutself.statu
s return truegt
13
onReset

• Used with form objects

ltform onResetalert(the form has been reset) gt
14
onSelect

• Used with text and textarea objects
• run some Javascript whenever a user selects a
  piece of text in a text or textarea object

ltinput typetext nameline onSelectshowHelp()
gt
15
onSubmit

• Use with form objects to run a handler whenever a
  form has been submitted.
• Usefull to validate all fields prior to actual
  submission

16
onUnload

• Just like onLoad but the handler is run when the
  window/frame is exited

ltbody onUnloadcleanup() gt
17
Advanced Event Handling

• Previous events are event objects caused as a
  result of interaction with forms tags
• There is another Event object made necessary by
  the advent of Dynamic HTML
• allows a more powerful way of trapping and
  processing events

18
The Event Object

• Provides a set of properties (no methods) that
  event handling routines use as constants
• property group 1 (modifier keys)
• Alt
• Event.ALT_MASK
• Ctrl
• Event.CONTROL_MASK
• Shift
• Event.SHIFT_MASK
• Meta (Windows key, or Command key on Mac)
• Event.META_MASK
• property group 2 (other event types)
• one property for each event type in DOM
• ex. Event.CLICK //generic click event

19
Capturing Events

• Remember the hierarchy

window
history
document
location
toolbar
link
anchor
layer
form
applet
image
area
text
radio
button
fileUpload
select
textarea
checkbox
reset
option
password
submit
20
Capturing Events (cont)

• Window, document and layers all have a
  captureEvents( ) method
• the methods require one or more parameters that
  will tell it which events to capture do this as
  the page loads (head section is good)
• window.captureEvents(Event.KEYPRESS)
• window.captureEvents(Event.KEYPRESS)
  Event.CLICK)
• assign a function to handle the captured event
• window.onClick processClick

21
Turning event capture off

• To turn event capture off use the releaseEvents(
  ) method
• use the same parameters as captureEvents( )

22
Event Forwarding

• Use your generalized event handler (for all
  clicks) to do high level processing and then
  allow the individual handlers do their job for
  the specific events by using routeEvent(e) to
  pass the event through the hierarchy to the
  target handler.
• This let you minimize the amount of code you
  would repeat in writing the handlers
• this lets your events to travel through the
  hierarchy automatically
• this works different for Netscape and Internet
  Explorer
• in Netscape events travel down the hierarchy to
  the target in IE they travel up the hierarchy
  (from the object to the window)
• in Netscape events are only generated by forms
  objects and a few others in IE almost any tag
  can generate an event

23
handleEvent

• The handleEvent(e) method allows you to route and
  event to anywhere in the hierarcy, regardless of
  the hierarchy.
• the object reference is the reference of the
  object to handle the event passing the event
  object as a parameter, like routeEvent and
  captureEvent
• as long as the target object as an event handler
  it will process it just as if it had received it
  directly from the system

24
Problems

• The event model is not standardized across all
  browsers, just as dynamic HTML is far from
  standardized.
• Forewarned is forearmed, this is a place where
  you could really get into trouble because of
  browser incompatibilities.