Bubbling Library > Examples

Examples of Using the Bubbling Technique: Global Behaviors

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

Facts:

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" });
oPushButton3.addClass ('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" });
oPushButton5.addClass ('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.CMS.Bubble.addDefaultAction('actionGlobalBahaviorTWO', function (layer, args) {
if (!args[1].decrepitate) {
// the behavior have not be adopted yet...
// do your stuff here...
alert ('Behavior TWO {actionGlobalBahaviorTWO}');
// reclaiming the behavior
args[1].decrepitate = true;
} else {
// the behavior 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.CMS.Bubble.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
args[1].decrepitate = 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.CMS.Bubble.on('god', function (layer, args) {
alert ('Behavior #3: Processing...'); // this message will be displayed everytime you click...
var _anch = YAHOO.CMS.Bubble.getOwnerByTagName( args[1].target, 'A' );
var _butt = YAHOO.CMS.Bubble.getOwnerByClassName( args[1].target, 'yui-button' );
if (!args[1].decrepitate && (_anch || _butt)) {
// 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].decrepitate = true;
}
});