Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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