[SOLVED] FlightJs event propagation

FlightJs event propagation

Here is a piece of index.html:

<div id="top">
    <div id="lvl1a">
    </div>
</div>

I have attachd two flightJS components to that structure.

One for top element:

function top() {
    this.after('initialize', function () {
        console.log('[DEBUG] Top initialized.');

        this.on('broadcastEvent', function (e, data) {
            console.log("[DEBUG] Broadcast recived: " + data.message);
        });
        this.trigger('broadcastEvent', {
            message: "This is a broadcast message."
        });
    });
}

And second for the lvl1a:

function lvl1a() {
    this.after('initialize', function () {
        console.log('[DEBUG] Lvl 1 a initialized.');

        this.on('broadcastEvent', function (e, data) {
            console.log("[DEBUG] Broadcast recived: " + data.message);
        });
    });
}

My output is:

[DEBUG] Top initialized.
[DEBUG] Broadcast recived: This is a broadcast message. 
[DEBUG] Lvl 1 a initialized.

Why the event isn't propagated to the children nodes? How can I make that happen ?

EDIT: I figured out that those events are propagated from bottom up. Is there any possibility to change it ?

Solution

The Flight (jQuery actually) uses standard DOM event propagation schema - events are bubbling from child to parent.

So in order to receive notifications from all children you should put your event handler on document root element (<html>) or common container element like <body>.

Try this

function lvl1a() {
    this.after('initialize', function () {
        console.log('[DEBUG] Lvl 1 a initialized.');

        $(document.body).on('broadcastEvent', function (e, data) {
            console.log("[DEBUG] Broadcast recived: " + data.message);
        });
    });
}