FlightJs event propagation

Question

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 ?

score 2 · Accepted Answer · answered Sep 09 '14 at 19:03

2

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);
        });
    });
}

answered Sep 09 '14 at 19:03

c-smile

26,734
7
59
86

Thank you for your response. Is there any way to change the default propagation schema from bubbling to capturing? So to broadcast the message from the top to all children ? – Adrian Baran Sep 09 '14 at 19:07
1

Event capturing is not event broadcasting. In order to call event handlers on all elements of some container you can do something like this: `$(container).find().triggerHandler("broadcastEvent");` but it can be quite expensive as it will traverse all descendants of the container - `O(N)` operation. – c-smile Sep 09 '14 at 19:22

FlightJs event propagation

1 Answers1