The Web Wizard

1
The Web Wizards Guide To DHTML and CSS

• Chapter 6
• Understanding Events

2
Chapter Objectives

• Learn the history of Web browser event models
• Discover the nature of events on the Web
• Explore event propagation and bubbling
• Discover mouse events and position
• Use visibility techniques to create hypertext
• Create drag-and-drop applications
• Use keyboard events in Web page development

3
History of Web Browser Events

• Limited support for events in early browsers
• Expanded events in version 4.0 browsers
• Disparate event models (NN4 vs. IE4)
• New W3C event model

4
Events on the Web

• Browser creates events in response to user
  action.
• Event object begins life when user acts
• Event object ends life when scripts stop
  processing it
• One event at a time
• Netscape and W3C static Event object
• IE4 window.event
• Every event has a target

5
Propagation and Bubbling
6
Tracking Mousemove Events and Mouse Position

• ltbody onmousemove "showxy(event)gt
• function showxy(evt)
• if (window.event) evt window.event
• if (evt)
• var pos evt.clientX ", " evt.clientY
• window.statuspos

7
Hypertext with Mouse Events

• Title tag for single line tool tips
• Hypertext for multi-line content
• Add event handlers to links
• onmouseover"doHT(event,'vitry','visible')
• onmouseout"doHT(event,'vitry',hidden')
• First parameter passes event
• Second parameter passes ID
• Third parameter passes visibility

8
Drag-and-Drop Applications

• Place drag-and-drop code in library
• Place utility functions in library
• Add event handlers to div
• onmousedown"setDrag(event,this)"
• onmouseup"checkdroploc('1','0')
• Drag begins on mousedown
• Drag ends on mouseup
• Script checks new position of div

9
Keyboard Events

• Keyboard is fasted input device
• onload"init()
• document.onkeyup getKeyEvent
• Obtains keyCode
• Check for letters, numbers, or space bar
• Swap text node value to show key typed