# 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: Events supported by the DOM2 event model Custom events specific to CBE 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