1. Introduction to Programming the WWW I
CMSC
Winter 2003
Lecture 13

2. More on Events Discuss drag and drop Keyboard handling Summary
mouse interactions
dropping things
Keyboard handling
Summary
review event model
highlight browser differences

3. Main elements of drag and drop
mousedown handler for an item
turns on movement, mouseup event handlers
respond to movement with updating position
respond to drop location appropriately

4. Drag and drop stages drag1.html: Get the listening, mouse right
drag2.html: Get the z positioning right
book’s example: respond to drop location

5. Remark on Book’s dragging app
Note that we have two event handlers for the mouseup event:
onmouseup specified in each div
document.onmouseup set during dragging
Event bubbling means both handlers get called

6. Keyboard events Another kind of event triggered by key down, key up
Read the key, modifiers from the listener
respond accordingly

7. Event model Browsers can listen for and respond to events
Need to set up elements of a page to respond
Use your imagination and look at Web pages

8. Browser differences Propagation and bubbling
Window.event vs. local event object
cross-browser code is fairly simple, especially with library code