The Web Wizard’s Guide To DHTML and CSS

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

The Web Wizard’s Guide To DHTML and CSS