Examples of Using the Bubbling Technique: Global Behaviors

In this example you will see how to define global behaviors for anchors and buttons.

Facts:

Zero or more elements can fire the same behavior (DOM's elements "anchor" or "buttons" with the same classname) ( see the panel 1 )
The position of the elements inside the DOM is not important, neither the moment when a certain element is added to the DOM, once the element is available the behavior will be available too ( see the panel 2 ).
If a certain behavior is not available or is undefined, the event will pass thru the DOM's elements even when the target element has the classname applied ( see the panel 3 ).
If a certain DOM element has more than one behavior (classname applied), all the behaviors will be audited using the definition priority (inclusion order), but as soon as one of the behaviors reclaim the event, the others will be notified and can decide if the event will pass thru or will be reclaimed as a secondary behavior ( see panel 4 )
As you can see in the source, in this page we don't use addListener, or any other event definition utility, we are using the event bubbling technique to catch each event in the top level (document.body) in the DOM.

Panel 1: Static elements Link with behavior

Panel 2: Dynamic elements

Note: Click here to generate a set of elements dynamically.

- Remember that the BEHAVIOR TWO can be activated in the panel 3.
- Keep in mind that non of this buttons have an addlistener, neither an ID or a reference, keeping the memory as low as posible.

See the code below:

// button3: push button with actionGlobalBehaviorTWO behavior linked
var oPushButton3 = new YAHOO.widget.Button({ label:"Button From JavaScript with BEHAVIOR #2", container:"pushbuttonsfromjavascript", className:"actionGlobalBahaviorTWO" });
// button4: push button without behavior
var oPushButton4 = new YAHOO.widget.Button({ label:"Button From JavaScript without behavior", container:"pushbuttonsfromjavascript" });

// button5: push button with actionGlobalBehaviorONE behavior linked
var oPushButton5 = new YAHOO.widget.Button({ label:"Button From JavaScript with BEHAVIOR #1", container:"pushbuttonsfromjavascript", className:"actionGlobalBahaviorONE" });

The vars oPushButton3, oPushButton4 and oPushButton5 are locally, and will be freezed as soom as the function execution finish. And note that the "class" is used as a wrapper to a certain behavior.

Panel 3: Dynamic behaviors

Note: Click here to generate a define dynamically a new behavior "BEHAVIOR #2".

YAHOO.Bubbling.addDefaultAction('actionGlobalBahaviorTWO', function (layer, args) {
    if (!args[1].flagged) {
        // the behavior have not be adopted yet...
        // do your stuff here...
        alert ('Behavior TWO {actionGlobalBahaviorTWO}');
        // reclaiming the behavior
        return true; // is equivalent to: args[1].flagged = true; args[1].stop = true;
    } else {
        // the event was already adopted by another behavior
    }
});

Panel 4: Mutiples behaviors

Link with behavior ONE and TWO

- Even when the behavior #2 is available, will not be fired when you click on this buttons, because the behavior #1 claim the event first.
- Nevertheless, you can avoid this restriction.
- Remember that the BEHAVIOR TWO can be activated in the panel 3.

Each behavior can know if a certain event was adopted by another behavior or not. The example code below represent a variation of the Behavior #2, in this case the behavior #2 will be triggered even if the event was adopted by another behavior.

YAHOO.Bubbling.addDefaultAction('actionGlobalBahaviorTWO', function (layer, args) {
      // don't worry if the the behavior was already adopted by another behavior...
      // do your stuff here... anyway
      alert ('Behavior TWO {actionGlobalBahaviorTWO}');
      // reclaiming the behavior
     return true; // this is only necesary if you want to reclaim this event
});

Panel 5: Lowlevel behavior definition

Note: Click here to define a low level behavior ("BEHAVIOR #3").

- When the behavior #3 becomes available, all the events on anchors, inputs and buttons will be catches by this behavior if nobody has claimed this event before.
- See what happen when you click in buttons without behaviors.
- If the behavior #3 becomes available before the behavior #2, you will see what happen when you click in buttons with the behavior two.

See the code below:

YAHOO.Bubbling.on('god', function (layer, args) {
    alert ('Behavior #3: Processing...'); // this message will be displayed everytime you click...
    if (!args[1].flagged && (args[1].anchor || args[1].button)) {
        // The target was an anchor or a button, and nobody have claim this event yet.
        // here your stuff
        alert ("Behavior #3: The target was an anchor or a button, and nobody have claim this event yet.");
        // reclaiming the event
        args[1].flagged = true;
    }
});