the web wizard’s guide to dhtml and css chapter 6 understanding events
TRANSCRIPT
![Page 1: The Web Wizard’s Guide To DHTML and CSS Chapter 6 Understanding Events](https://reader036.vdocuments.net/reader036/viewer/2022082422/5697bfd01a28abf838caa91f/html5/thumbnails/1.jpg)
The Web Wizard’s Guide To DHTML and CSS
Chapter 6
Understanding Events
![Page 2: The Web Wizard’s Guide To DHTML and CSS Chapter 6 Understanding Events](https://reader036.vdocuments.net/reader036/viewer/2022082422/5697bfd01a28abf838caa91f/html5/thumbnails/2.jpg)
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
![Page 3: The Web Wizard’s Guide To DHTML and CSS Chapter 6 Understanding Events](https://reader036.vdocuments.net/reader036/viewer/2022082422/5697bfd01a28abf838caa91f/html5/thumbnails/3.jpg)
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
![Page 4: The Web Wizard’s Guide To DHTML and CSS Chapter 6 Understanding Events](https://reader036.vdocuments.net/reader036/viewer/2022082422/5697bfd01a28abf838caa91f/html5/thumbnails/4.jpg)
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
![Page 5: The Web Wizard’s Guide To DHTML and CSS Chapter 6 Understanding Events](https://reader036.vdocuments.net/reader036/viewer/2022082422/5697bfd01a28abf838caa91f/html5/thumbnails/5.jpg)
Propagation and Bubbling
![Page 6: The Web Wizard’s Guide To DHTML and CSS Chapter 6 Understanding Events](https://reader036.vdocuments.net/reader036/viewer/2022082422/5697bfd01a28abf838caa91f/html5/thumbnails/6.jpg)
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;}
}
![Page 7: The Web Wizard’s Guide To DHTML and CSS Chapter 6 Understanding Events](https://reader036.vdocuments.net/reader036/viewer/2022082422/5697bfd01a28abf838caa91f/html5/thumbnails/7.jpg)
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
![Page 8: The Web Wizard’s Guide To DHTML and CSS Chapter 6 Understanding Events](https://reader036.vdocuments.net/reader036/viewer/2022082422/5697bfd01a28abf838caa91f/html5/thumbnails/8.jpg)
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
![Page 9: The Web Wizard’s Guide To DHTML and CSS Chapter 6 Understanding Events](https://reader036.vdocuments.net/reader036/viewer/2022082422/5697bfd01a28abf838caa91f/html5/thumbnails/9.jpg)
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