The final example in this chapter, Example 6.4, demonstrates how event capturing and event bubbling can work together to let document-level event handlers control the dragging of elements on the screen. Because Navigator does not support events for elements that are not part of the document object hierarchy, it makes perfect sense to have the document capture all pertinent events and process them. While IE 4 could have event handlers assigned to each of the elements, that would require more effort than is necessary.
All the dragging event handlers are assigned as properties in an
init() function invoked by the
onLoad event handler. The only platform-specific
process taking place here involves setting the
document.captureEvents() method to grab all mouse
down and mouse move events that come in from Navigator 4.
The draggable elements in this example are two absolute-positioned
DIV elements that contain
IMGelements. The user can click on either image and drag that
image around. While it is a simple operation for the user, the
application must do a fair amount of work to figure out which element
has been clicked and then track the location of the element in sync
with the mouse. Stacking order also comes into consideration because
you want a selected element to be atop all its peers as the user
drags it around the screen.
Determining which element has been clicked requires a lot more work in Navigator than in IE. Assuming that all targeted elements are sibling ...