Events

Lecture Notes for CS142
Winter Quarter 2009
John Ousterhout

Event types:
- Mouse-related: mouse movement, enter/leave element, button click
- Keyboard-related: down, up, press
- Focus-related: focus in, focus out (blur)
- Timer events
- Miscellaneous:
  - Content of an element has changed.
  - Page loaded/unloaded.
  - Uncaught error.
Creating an event handler: must specify 3 things:
- The event of interest.
- An element of interest.
- Javascript to invoke when the event occurs on the element.

Option #1: in the HTML:

<div onclick="mouseClick('id42');">...</div>

Option #2: from Javascript using the DOM:
```
element.onclick = mouseClick;
```
Can't pass arguments directly with this method, but can fudge it:
```
element.onclick = function() {mouseClick("id42");};
```
Event handlers typically need information about the event, such as mouse position or the specific key/button that was pressed.
- Interesting information in the event:
  - button: mouse button that was pressed
  - keyCode: identifier for the keyboard key that was pressed (not necessarily an ASCII character!)
  - charCode: integer Unicode value corresponding to key, if there is one.
  - clientX, clientY: mouse position relative to the document in the browser window
  - screenX, screenY: mouse position in screen coordinates
- This information is available in an event object passed to the handler: in Firefox the event is normally passed as the first argument to the handler:
  - HTML: pass it explicitly:
```
<div onclick="mouseClick(event);">
```
  - DOM: event passed automatically:
```
element.onclick = mouseClick;
```
- IE uses a global variable event to hold the current event

Example: dragExample.html:

<body>
  <div id="div1" onmousedown="mouseDown(event);"
      onmousemove="mouseMove(event);"
      onmouseup="mouseUp(event);">Drag Me!</div>
  <script type="text/javascript">
  //<![CDATA[
      isMouseDown = false;
      function mouseDown(event) {
          prevX = event.clientX;
          prevY = event.clientY;
          isMouseDown = true;
      }
      function mouseMove(event) {
          if (!isMouseDown) {
              return;
          }
          element = document.getElementById("div1");
          element.style.left = (element.offsetLeft +
                  (event.clientX - prevX)) + "px";
          element.style.top = (element.offsetTop +
                  (event.clientY - prevY)) + "px";
          prevX = event.clientX;
          prevY = event.clientY;
      }
      function mouseUp(event) {
          isMouseDown = false;
      }
  //]]>
  </script>
 </body>

Event-based programming is different from traditional imperative programming:
- Must wait for someone to invoke your code.
- Key is to maintain control through events: make sure you have declared enough handlers; last resort is a timer.
- Typically an event handler works by first figuring out what has changed (e.g., mouse coordinates in dragging example), then responding to that.

How does the browser decide which handler(s) are invoked for each event? All user-interface systems have to deal with this issue and there is no perfect solution.
- Complicating factor: elements can contain or overlap other elements (containment more common than overlap in the Web). Suppose I click with the mouse on "xyz" in the following example:
```
<body>
  <table>
    <tr>
      <td>xyz</td>
    </tr>
  </table>
</body>
```
- Sometimes only the innermost element should handle the event
- Approach #1: bubbling:
  - Invoke handlers on the innermost nested element under the mouse;
  - Then repeat on its parent, grandparent, etc.
  - Any given element can stop the bubbling, so that no ancestors will see the event (set cancelBubble on the event object).
- Approach #2: capture (or "trickle-down"):
  - Start at the outermost element and work down to the innermost nested element.
  - Each element can stop the capture, so that its children never see the event.
- The official DOM standard: first trickle-down, then bubble up.
  - IE implements only bubbling, no trickle-down.
  - Firefox and other browsers implement both.
- Simple things tend to work without paying much attention to the bubble/capture event model, but if you build interfaces with lots of active elements that you will probably run into complications and need to think carefully about the model.
Another issue in event handling: no grabs.
- If a particular element receives a mouse-down event, there is no guarantee it will see either mouse-motion or mouse-up (the mouse could move out of the element).
- This makes it difficult for elements to manage user interactions (see dragExample.html).
- Some systems (e.g. the X Window System) "grab" the mouse when a button is pressed:
  - Future mouse events go to the element where button was pressed, even if the mouse moves out of that element.
  - Grab released after processing button release.
  - Makes many interactions simpler.
- Web browsers do not implement grabs.
Timer events:
- Used for animations, automatic page refreshes.
- Run myfunc once, 50 milliseconds from now:
```
setTimeout("myfunc()", 50);
```
- Run myfunc every 50 milliseconds:
```
id = setInterval("myfunc()", 50);
```
- Cancel a repeating timer:
```
clearInterval(id);
```
Concurrency model for events:
- Events are serialized and processed one-at-a-time.
- Event handling does not interleave with other Javascript execution; no multi-threading.
Watch out for browser incompatibilities related to events.