Question

这是一段index.html：

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

我已将两个flightJS组件附加到该结构。

一个用于顶级元素：

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

第二个是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);
        });
    });
}

我的输出是：

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

为什么事件没有传播到子节点？我怎样才能做到这一点？

修改我发现那些事件是从下往上传播的。有没有可能改变它？

Answer 1

Flight（实际上是jQuery）使用标准的DOM事件传播模式 - 事件从子节点冒泡到父节点。

因此，为了接收来自所有孩子的通知，您应该将事件处理程序放在文档根元素（<html>）或公共容器元素（如<body>）上。

试试这个

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

FlightJs事件传播

1 个答案: