Introduction to Programming the WWW I

Introduction to Programming the WWW I CMSC 10100-1 Winter 2003 Lecture 12

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 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 • 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 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 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 Bubbling

More 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 • <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 • Simplified version

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

Introduction to Programming the WWW I