Transcript Lecture 13_ppt

Introduction to Programming
the WWW I
CMSC 10100-1
Winter 2003
Lecture 13
More on Events
• Discuss drag and drop
 mouse interactions
 dropping things
• Keyboard handling
• Summary
 review event model
 highlight browser differences
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
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
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
Keyboard events
•
•
•
•
Another kind of event
triggered by key down, key up
Read the key, modifiers from the listener
respond accordingly
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
Browser differences
• Propagation and bubbling
• Window.event vs. local event object
• cross-browser code is fairly simple,
especially with library code