introduction to programming the www i cmsc 10100-1 winter 2003 lecture 12
TRANSCRIPT
Introduction to Programming the WWW I
Introduction to Programming the WWW I
CMSC 10100-1
Winter 2003
Lecture 12
Chapter ObjectivesChapter 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 GUI programmingHistory of GUI programming
• Formerly, type in commands from keyboard
• 1970’s, 1980’s: Xerox research on GUI
• 1984: Macintosh operating system
• ~1990: Windows
• XWindows/UNIX
History of Web Browser Events
History of Web Browser Events
• Limited support for events in early browsers onclick
• Expanded events in version 4.0 browsers
• Disparate event models (NN4 vs. IE4)
• New W3C event model
Events on the WebEvents 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
Events and event handlersEvents and event handlers
• events are objects that contain information about what happened
• event handlers are functions that are members of an element that respond to particular events
Propagation and BubblingPropagation and Bubbling
More on W3C event modelMore on W3C event model
• use <element>addEventListener() to add an event listener and specify whether the event should be handled on the way down or up
/* on the way down */
document.addEventListener(“click”,foo,true);
/* on the way up */
document.addEventListener(“click”,bar,false);
• not widely employed
Tracking Mousemove Events and Mouse Position
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 EventsHypertext 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 ApplicationsDrag-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• Simplified version
Keyboard Events 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