Transcript Chapter 6
The Web Wizard’s Guide To
DHTML and CSS
Chapter 6
Understanding Events
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
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
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
Propagation and Bubbling
Tracking Mousemove Events and
Mouse Position
• <body onmousemove = "showxy(event);”>
function showxy(evt){
if (window.event){ evt =
window.event; }
if (evt){
var pos = evt.clientX + ", " +
evt.clientY;
window.status=pos;
}
}
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
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
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