Events in the Canvas

• Event Type Reference
• click Event.
• wheel events
• In general most event based systems have a main loop that looks something like this

  • 
    set up even handlers
    while(1) {
        e = EventQueue.dequeue();
        DispatchEvent(e);
    } 

  • The queue is filled from several sources
    • In our case, events are generated by the operating system (or even lower), like mouse movement.
    • The browser generates events as well (like file loaded)
    • Programmers generally have the ability to generate events too.
  • The DispatchEvent function hands the event to the proper Event Handler or in our terms eventListener
    • There is an algorithm for determing which elements get an event.
    • But this only among the elemets that have an event handler registered for that event.
    • The process is to move "down" in the DOM heirarchy as far as possible to find the lowest element that could have received an event.
    • Then work back up calling the first event handler that is registered for the event.
    • Apparently in the html world, all registered handlers in the tree are called.
      • This is not really normal behavior.
      • But you can stop events from going higher

      • function OnClick(e) {
          e.stopPropagation();
          ...
        }; 

    • More information.
  • An event is any action that can occur.
    • The event structure is a heirarchy
      • Look here.
      • Actually start with a wheel event
      • Move to mouse event
      • We could go further to a UI event
      • And finish at the parent a event.
• Below, the canvas is declared inside of a div
  • There is a red border around the division.
  • So the canvas is nested inside of the div.
  • Each has a handler registered.

Canvas Message Area

Wrapper Message Area

• You need to add this line so that the canvas can receive focus

• canvas = document.getElementById("eventCanvas");
  canvas.tabIndex = 0;
  

• I reistered an event handler for a number of events.

• canvas.addEventListener("click", MyHandler);
  canvas.addEventListener("keydown", MyHandler);
  canvas.addEventListener("focus", MyHandler);
  canvas.addEventListener("wheel", MyHandler);
  

• Then a massive event handler.
  • See a stand alone version
  • Look at the source of the big event handler.