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