Basic Event Management in CBE

Intro To CBE Events

It will be helpful to first read about the CBE object model and event model. The individual events are described in the reference.

CBE provides support for three categories of events:

  1. Events supported by the DOM2 event model
  2. Custom events specific to CBE
  3. Events supported by the DOM0 event model

The CrossBrowserElement methods addEventListener() and removeEventListener() provide the programming interface to all the above.

This page provides examples of using some of the events supported by CBE. There are other pages that provide examples for the remaining events. Also see the event properties viewer.

DOM 2 Events

These events propagate up and down the parent chain of the event target.

  • click
  • mousedown
  • mouseup
  • mousemove
  • mouseover
  • mouseout
  • keypress
  • keyup
  • keydown

mouseMove Example

On this page there are three positioned elements, C, B, and E (they're draggable). They float in the southeast corner of the window. The following will add/remove a mouseMove event listener to document.cbe which will control the three elements.

Add

Remove

window.C = cbeGetElementById('C');
window.B = cbeGetElementById('B');
window.E = cbeGetElementById('E');

...

document.cbe.addEventListener('mouseMove', mouseMoveListener);

...

document.cbe.removeEventListener('mouseMove', mouseMoveListener);

...

function mouseMoveListener(e) {
  C.moveTo(e.pageX+10, e.pageY+10);
  B.moveTo(e.pageX+20, e.pageY+20);
  E.moveTo(e.pageX+30, e.pageY+30);
}

Top

mouseOver/mouseOut Example

The following will add/remove mouseOver and mouseOut event listeners to elements C, B, and E which will control the colors of the three elements.

Add

Remove

C.addEventListener('mouseOver', mouseOverListener);
C.addEventListener('mouseOut', mouseOutListener);
B.addEventListener('mouseOver', mouseOverListener);
B.addEventListener('mouseOut', mouseOutListener);
E.addEventListener('mouseOver', mouseOverListener);
E.addEventListener('mouseOut', mouseOutListener);

...

C.removeEventListener('mouseOver', mouseOverListener);
C.removeEventListener('mouseOut', mouseOutListener);
B.removeEventListener('mouseOver', mouseOverListener);
B.removeEventListener('mouseOut', mouseOutListener);
E.removeEventListener('mouseOver', mouseOverListener);
E.removeEventListener('mouseOut', mouseOutListener);

...

function mouseOverListener(e) {
  e.cbeCurrentTarget.color('#ffffff');
  e.cbeCurrentTarget.background('#3333ff');
}

function mouseOutListener(e) {
  e.cbeCurrentTarget.color('#3333ff');
  e.cbeCurrentTarget.background('transparent');
}

Top

Custom Events

These events are non-standard - they are specific to CBE. These events are sent directly to the event target's listener and do not propagate.

  • drag - This event does not propagate, but the mouseMove event that generates the drag event does propagate. The drag event object received by the listener will have it's properties set as if it is propagating. See this drag event example.
  • dragStart
  • dragEnd
  • slide - See this slide event example.
  • slideStart
  • slideEnd
  • dragResize - This is not strictly an event. You can't provide a listener. I've provided listeners that implement basic dragging and resizing. You register those listeners by calling ele.addEventListener('dragResize'). See this dragResize example.

Top

DOM 0 Events

This category includes all events not mentioned above. These events are sent directly to the event target's listener and do not propagate.

scroll & resize Example

Currently, the only cross-browser support for these events is by window.cbe. In NN4, Gecko and Opera scroll is a custom event. In IE it is a DOM0 event. In NN4 and Opera resize is a custom event. In IE and Gecko it is a DOM0 event.

The following code snippet is from this site's home page. It uses the window's scroll event to maintain the menubar at the top of the window. It uses the window's resize event to keep the menubar the same width as the window.

var menu, anchor;
function windowOnload() {
  anchor = cbeGetElementById('idAnchor').cbe;
  with (menu = cbeGetElementById('idMenuBar').cbe) {
    background('#cccccc');
    resizeTo(document.cbe.width(), 22);
    moveTo(0,anchor.pageY());
    zIndex(100);
    show();
  }
  window.cbe.addEventListener('scroll', windowScrollListener);
  window.cbe.addEventListener('resize', windowResizeListener);
}

function windowResizeListener(e) {
  if (is.nav4 || is.opera) {
    location.replace('index.html');
    return;
  }
  var my = document.cbe.scrollTop();
  if (my==0) my = anchor.pageY();
  with (menu) {
    resizeTo(document.cbe.width(), height());
    moveTo(0, my);
  }
}

function windowScrollListener(e) {
  var my = document.cbe.scrollTop();
  if (my==0) my = anchor.pageY();
  menu.moveTo(0, my);
}

Others

All other event types are assumed to be DOM0 events, and are registered accordingly.

C
B
E