Events

Lecture Notes for CS349W
Fall Quarter 2008
John Ousterhout

Events allow the browser to respond to user actions.
Arrange for Javascript code (an event handler) to be invoked when a particular event occurs (mouse click, keystroke, etc.) on a particular element.
Unfortunately, there are still many browser incompatibilities in this area, so don't expect your class projects to run on browsers other than Firefox.
Event types:
- Mouse-related: mouse movement, enter/leave element, button click
- Keyboard-related: down, up, press
- Focus-related: focus in, focus out (blur)
- 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.
- 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
- 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: ASCII character 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

<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>

Discuss location of event handler declarations.

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: e.g., if I click on a button in the middle of a paragraph, the paragraph shouldn't see the button click (it may try to select text).
- Sometimes it's more convenient for an outer element to handle the event (put the code in one place to manage all of the inner elements)
- Approach #1: bubbling:
  - Invoke handlers on the innermost nested element under the mouse;
  - Then repeat on its parent, grandparent, etc. (the event "bubbles" up through all of the containing elements from innermost to outermost).
  - 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 (this is really the best way to implement dragExample.html).
- The official DOM standard is to enable both models: each event first trickles down, then bubbles up. However, IE doesn't implement the trickle-down portion (Firefox does). The bubbling behavior is universally supported.
- 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, so that all mouse events up through the next button release go to the element where it was pressed, even if the mouse moves off that element. This makes many interactions simpler, though it has some complexities of its own.
- Web browsers do not implement grabs.
Timer events:
- Used for animations, automatic page refreshes.
- Run myfunc once in 50 milliseconds:
```
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; there is no multi-threading.