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

More on Events Discuss drag and drop Keyboard handling Summary 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