Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Event Custom Branch (gallery-event-custom-branch)

Last Updated: 06/21/12

+ 0 -

Steven Olmsted

YUI Contributor

See 42 more by this user.

Created: 03/1/12
Project: YUI 3
License: YUI BSD
YUI Version: 3.5.0pr2
Free for use.

EventTargets have the capability to add another EventTarget allowing events to bubble up and get handled elsewhere in an application. Event bubbling is quite useful when working with the DOM and equally so when working with custom events.

EventTarget has an added feature that DOM nodes don't have, an EventTarget can have multiple bubble targets. An event will bubble to the bubble targets in the order that they were added. If the first bubble target itself has bubble targets, the event will bubble to them before continuing to the second bubble target. This creates a branching tree-like pattern of event bubbling.

Currently, EventFacade seems to be modelled after DOM events, containing methods such as halt, preventDefault, stopImmediatePropagation, and stopPropagation. These methods work quite well when dealing with a single bubble target per EventTarget, but they do not offer much help when you wish to control multiple bubble target branches separately.

This module adds the following branch specific methods to EventFacade: haltBranch, preventBranchDefault, stopBranchPropagation, stopImmediateBranchPropagation. This allows you to control the bubbling of a branch without changing the default behavior of another branch.

This module rewrites a lot of YUI's custom event system and therefore it is very difficult to maintain. I would consider it experimental and would not recommend using it in a production environment.

Download
Docs
Homepage
Bugs
Source
Example
Forum
History

This module modifies the prototype members of CustomEvent, EventFacade, and EventTarget. Other common YUI objects, specifically Attribute, mix some of the members into themselves. This means that this module must be loaded before attribute or any other modules that do this mixing, otherwise the mixed objects will not function correctly.

Code Sample

YUI().use('gallery-event-custom-branch', function (Y) {
    // An inner Y.use makes certain that gallery-event-custom-branch loads before attribute.
 
    Y.use('base', 'node', function (Y) {
        var bodyNode = Y.one('body'),
 
            // Create EventTarget objects to set up event bubbling.
            // These objects all define a defaultFn for an event.
            // The defaultFns append an identifier to the DOM so we can see
            // the order in which they are called.
 
            root = new (Y.Base.create('root', Y.Base, [], {
                initializer: function () {
                    this.publish('event', {
                        defaultFn: function () {
                            bodyNode.append('<p>root defaultFn</p>');
                        }
                    });
                }
            })),
            branch0 = new (Y.Base.create('branch0', Y.Base, [], {
                initializer: function () {
                    this.publish('root:event', {
                        defaultFn: function () {
                            bodyNode.append('<p>branch0 defaultFn</p>');
                        }
                    });
                }
            })),
            branch1 = new (Y.Base.create('branch1', Y.Base, [], {
                initializer: function () {
                    this.publish('root:event', {
                        defaultFn: function () {
                            bodyNode.append('<p>branch1 defaultFn</p>');
                        }
                    });
                }
            })),
            branch2 = new (Y.Base.create('branch2', Y.Base, [], {
                initializer: function () {
                    this.publish('root:event', {
                        defaultFn: function () {
                            bodyNode.append('<p>branch2 defaultFn</p>');
                        }
                    });
                }
            })),
            branch00 = new (Y.Base.create('branch00', Y.Base, [], {
                initializer: function () {
                    this.publish('root:event', {
                        defaultFn: function () {
                            bodyNode.append('<p>branch00 defaultFn</p>');
                        }
                    });
                }
            })),
            branch01 = new (Y.Base.create('branch01', Y.Base, [], {
                initializer: function () {
                    this.publish('root:event', {
                        defaultFn: function () {
                            bodyNode.append('<p>branch01 defaultFn</p>');
                        }
                    });
                }
            })),
            branch10 = new (Y.Base.create('branch10', Y.Base, [], {
                initializer: function () {
                    this.publish('root:event', {
                        defaultFn: function () {
                            bodyNode.append('<p>branch10 defaultFn</p>');
                        }
                    });
                }
            })),
            branch11 = new (Y.Base.create('branch11', Y.Base, [], {
                initializer: function () {
                    this.publish('root:event', {
                        defaultFn: function () {
                            bodyNode.append('<p>branch11 defaultFn</p>');
                        }
                    });
                }
            })),
            branch20 = new (Y.Base.create('branch20', Y.Base, [], {
                initializer: function () {
                    this.publish('root:event', {
                        defaultFn: function () {
                            bodyNode.append('<p>branch20 defaultFn</p>');
                        }
                    });
                }
            })),
            branch21 = new (Y.Base.create('branch21', Y.Base, [], {
                initializer: function () {
                    this.publish('root:event', {
                        defaultFn: function () {
                            bodyNode.append('<p>branch21 defaultFn</p>');
                        }
                    });
                }
            }));
 
        // root branches to branch0, branch1, and branch2
        root.addTarget(branch0);
        root.addTarget(branch1);
        root.addTarget(branch2);
 
        // branch0 branches to branch00 and branch01
        branch0.addTarget(branch00);
        branch0.addTarget(branch01);
 
        // branch1 branches to branch10 and branch11.
        branch1.addTarget(branch10);
        branch1.addTarget(branch11);
 
        // branch2 branches to branch20 and branch21.
        branch2.addTarget(branch20);
        branch2.addTarget(branch21);
 
        // Set up event listeners.  These event listeners append an identifier to
        // the DOM so we can see the order in which they are called.
 
        root.on('event', function (eventFacade) {
            bodyNode.append('<p>root.on 0</p>');
        });
 
        root.on('event', function (eventFacade) {
            bodyNode.append('<p>root.on 1</p>');
        });
 
        branch0.on('root:event', function (eventFacade) {
            bodyNode.append('<p>branch0.on 0</p>');
 
            // Uncomment the following lines one-by-one to see their effect on branch0.
 
            //eventFacade.haltBranch();
            //eventFacade.haltBranch(true);
            //eventFacade.preventBranchDefault();
            //eventFacade.stopBranchPropagation();
            //eventFacade.stopImmediateBranchPropagation();
        });
 
        branch0.on('root:event', function (eventFacade) {
            bodyNode.append('<p>branch0.on 1</p>');
        });
 
        branch1.on('root:event', function (eventFacade) {
            bodyNode.append('<p>branch1.on 0</p>');
        });
 
        branch1.on('root:event', function (eventFacade) {
            bodyNode.append('<p>branch1.on 1</p>');
        });
 
        branch2.on('root:event', function (eventFacade) {
            bodyNode.append('<p>branch2.on 0</p>');
        });
 
        branch2.on('root:event', function (eventFacade) {
            bodyNode.append('<p>branch2.on 1</p>');
        });
 
        branch00.on('root:event', function (eventFacade) {
            bodyNode.append('<p>branch00.on 0</p>');
        });
 
        branch00.on('root:event', function (eventFacade) {
            bodyNode.append('<p>branch00.on 1</p>');
        });
 
        branch01.on('root:event', function (eventFacade) {
            bodyNode.append('<p>branch01.on 0</p>');
        });
 
        branch01.on('root:event', function (eventFacade) {
            bodyNode.append('<p>branch01.on 1</p>');
        });
 
        branch10.on('root:event', function (eventFacade) {
            bodyNode.append('<p>branch10.on 0</p>');
        });
 
        branch10.on('root:event', function (eventFacade) {
            bodyNode.append('<p>branch10.on 1</p>');
        });
 
        branch11.on('root:event', function (eventFacade) {
            bodyNode.append('<p>branch11.on 0</p>');
        });
 
        branch11.on('root:event', function (eventFacade) {
            bodyNode.append('<p>branch11.on 1</p>');
        });
 
        branch20.on('root:event', function (eventFacade) {
            bodyNode.append('<p>branch20.on 0</p>');
        });
 
        branch20.on('root:event', function (eventFacade) {
            bodyNode.append('<p>branch20.on 1</p>');
        });
 
        branch21.on('root:event', function (eventFacade) {
            bodyNode.append('<p>branch21.on 0</p>');
        });
 
        branch21.on('root:event', function (eventFacade) {
            bodyNode.append('<p>branch21.on 1</p>');
        });
 
        // Finally, fire the event.
 
        root.fire('event');
    });
});

YUI().use('gallery-event-custom-branch', function (Y) {
    // An inner Y.use makes certain that gallery-event-custom-branch loads before attribute.

Y.use('base', 'node', function (Y) {
        var bodyNode = Y.one('body'),
        
            // Create EventTarget objects to set up event bubbling.
            // These objects all define a defaultFn for an event.
            // The defaultFns append an identifier to the DOM so we can see
            // the order in which they are called.

root = new (Y.Base.create('root', Y.Base, [], {
 initializer: function () {
 this.publish('event', {
 defaultFn: function () {
 bodyNode.append('root defaultFn');
 }
 });
 }
 })),
 branch0 = new (Y.Base.create('branch0', Y.Base, [], {
 initializer: function () {
 this.publish('root:event', {
 defaultFn: function () {
 bodyNode.append('branch0 defaultFn');
 }
 });
 }
 })),
 branch1 = new (Y.Base.create('branch1', Y.Base, [], {
 initializer: function () {
 this.publish('root:event', {
 defaultFn: function () {
 bodyNode.append('branch1 defaultFn');
 }
 });
 }
 })),
 branch2 = new (Y.Base.create('branch2', Y.Base, [], {
 initializer: function () {
 this.publish('root:event', {
 defaultFn: function () {
 bodyNode.append('branch2 defaultFn');
 }
 });
 }
 })),
 branch00 = new (Y.Base.create('branch00', Y.Base, [], {
 initializer: function () {
 this.publish('root:event', {
 defaultFn: function () {
 bodyNode.append('branch00 defaultFn');
 }
 });
 }
 })),
 branch01 = new (Y.Base.create('branch01', Y.Base, [], {
 initializer: function () {
 this.publish('root:event', {
 defaultFn: function () {
 bodyNode.append('branch01 defaultFn');
 }
 });
 }
 })),
 branch10 = new (Y.Base.create('branch10', Y.Base, [], {
 initializer: function () {
 this.publish('root:event', {
 defaultFn: function () {
 bodyNode.append('branch10 defaultFn');
 }
 });
 }
 })),
 branch11 = new (Y.Base.create('branch11', Y.Base, [], {
 initializer: function () {
 this.publish('root:event', {
 defaultFn: function () {
 bodyNode.append('branch11 defaultFn');
 }
 });
 }
 })),
 branch20 = new (Y.Base.create('branch20', Y.Base, [], {
 initializer: function () {
 this.publish('root:event', {
 defaultFn: function () {
 bodyNode.append('branch20 defaultFn');
 }
 });
 }
 })),
 branch21 = new (Y.Base.create('branch21', Y.Base, [], {
 initializer: function () {
 this.publish('root:event', {
 defaultFn: function () {
 bodyNode.append('branch21 defaultFn');
 }
 });
 }
 }));
 
 // root branches to branch0, branch1, and branch2
 root.addTarget(branch0);
 root.addTarget(branch1);
 root.addTarget(branch2);
 
 // branch0 branches to branch00 and branch01
 branch0.addTarget(branch00);
 branch0.addTarget(branch01);
 
 // branch1 branches to branch10 and branch11.
 branch1.addTarget(branch10);
 branch1.addTarget(branch11);
 
 // branch2 branches to branch20 and branch21.
 branch2.addTarget(branch20);
 branch2.addTarget(branch21);
 
 // Set up event listeners. These event listeners append an identifier to
 // the DOM so we can see the order in which they are called.

root.on('event', function (eventFacade) {
 bodyNode.append('root.on 0');
 });
 
 root.on('event', function (eventFacade) {
 bodyNode.append('root.on 1');
 });
 
 branch0.on('root:event', function (eventFacade) {
 bodyNode.append('branch0.on 0');

// Uncomment the following lines one-by-one to see their effect on branch0.

//eventFacade.haltBranch();
 //eventFacade.haltBranch(true);
 //eventFacade.preventBranchDefault();
 //eventFacade.stopBranchPropagation();
 //eventFacade.stopImmediateBranchPropagation();
 });
 
 branch0.on('root:event', function (eventFacade) {
 bodyNode.append('branch0.on 1');
 });
 
 branch1.on('root:event', function (eventFacade) {
 bodyNode.append('branch1.on 0');
 });
 
 branch1.on('root:event', function (eventFacade) {
 bodyNode.append('branch1.on 1');
 });
 
 branch2.on('root:event', function (eventFacade) {
 bodyNode.append('branch2.on 0');
 });
 
 branch2.on('root:event', function (eventFacade) {
 bodyNode.append('branch2.on 1');
 });
 
 branch00.on('root:event', function (eventFacade) {
 bodyNode.append('branch00.on 0');
 });
 
 branch00.on('root:event', function (eventFacade) {
 bodyNode.append('branch00.on 1');
 });
 
 branch01.on('root:event', function (eventFacade) {
 bodyNode.append('branch01.on 0');
 });
 
 branch01.on('root:event', function (eventFacade) {
 bodyNode.append('branch01.on 1');
 });
 
 branch10.on('root:event', function (eventFacade) {
 bodyNode.append('branch10.on 0');
 });
 
 branch10.on('root:event', function (eventFacade) {
 bodyNode.append('branch10.on 1');
 });
 
 branch11.on('root:event', function (eventFacade) {
 bodyNode.append('branch11.on 0');
 });
 
 branch11.on('root:event', function (eventFacade) {
 bodyNode.append('branch11.on 1');
 });
 
 branch20.on('root:event', function (eventFacade) {
 bodyNode.append('branch20.on 0');
 });
 
 branch20.on('root:event', function (eventFacade) {
 bodyNode.append('branch20.on 1');
 });
 
 branch21.on('root:event', function (eventFacade) {
 bodyNode.append('branch21.on 0');
 });
 
 branch21.on('root:event', function (eventFacade) {
 bodyNode.append('branch21.on 1');
 });
 
 // Finally, fire the event.

root.fire('event');
    });
});