AC8: Input

The purpose of this activity is to learn more about how user interfaces handle mouse and keyboard input. You'll need a web browser; a modern standards-compliant browser like Firefox, Opera, or Safari is preferred, but Internet Explorer will also work with a few small differences. The workbench for the activity is located at http://courses.csail.mit.edu/6.831/handouts/ac8/events.html.

1 Event Dispatch and Propagation

The workbench is initially configured with an event listener listening for clicks on A. Which objects can you click on to fire this listener?

Add a click listener to object C (keeping the listener on A as well). Which listeners fire when you click on C? In what order do they fire? How about when you click on B?

Change your listener on C so that it consumes the event. In standard browsers (Firefox/Opera/Safari), this is done by calling event.stopPropagation(). (In Internet Explorer, you might need to use window.event.cancelBubble=true.) Now which listeners fire when you click on C? How about when you click on B?

2 Event Translation

Javascript's events for mouse clicking are onclick, onmousedown, onmouseup, and ondblclick. Attach listeners for these events to one of the objects in the workbench to discover the sequence in which these events occur when the user double-clicks on that object. Write the sequence below, and mark which events are raw and which are translated.

3 Mouse Movements

Javascript's event for mouse movement is onmousemove. Add a mouse move listener to A, and display the mouse coordinates using print(event.clientX + "," + event.clientY). (In Internet Explorer, you might have to use window.event instead of just event.) What origin are these (x,y) positions using? How is this different from the coordinate system used by Java Swing's mouse events? (See MouseEvent in the Java 1.5 API documentation.)

Now slow down your mouse move listener. (The workbench defines a function sleep(milliseconds) for this purpose; e.g., sleep(500) waits for 500 milliseconds before it returns.) Does the browser coalesce mouse move events? How do you know? Does it coalesce mouse click events?

4 Mouse Capture

By adding appropriate mouse listeners, determine whether the web browser provides mouse capture by default: i.e., if the user presses the mouse button over a target, does the target continue receiving mouse events until the mouse button is released? Explain how you found out. Would you be able to implement a scrollbar using the web browser? Why or why not?