Introduction to Programming the WWW I CMSC 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 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 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