Embed Size (px)
Citation preview
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
