父子视图事件绑定关系

Question

我想知道亲子关系中的事件应该设置在哪里。这不是一个具体问题，只是我猜的最佳实践。我的具体情况：

我有一个 Dropdown，其中包含一个 Button 和一个 List。描述操作后，按下按钮，就会出现列表。单击列表中的某个项目，该项目就会被选中，列表就会消失。

因此，第一件事是，由于视图被初始化为 Dropdown，因此制作它的人不需要接触并处理 Button 或 List 视图。所有方法都应该在父视图上调用，并且事件可能需要从子视图中冒泡。

例如，Dropdown 提供了自己的 press 方法，该方法仅调用 < code>Button 的按下方法。

当用户按下按钮时，Button 会触发 Dropdown 正在监听的 press 事件。

onButtonPress : function () {

    if (!this.isExpanded()) {
        this.expand();
    }

    this.trigger('press');
},

并且 Dropdown 会触发自身按下，这样开发人员无需访问 dropdown.button 即可获取按下事件。

这就是第一个问题。 Dropdown 应该在 onButtonPress 中扩展自身，还是应该 onButtonPress 仅触发按下，然后让扩展侦听 Dropdown自己的 press 事件：

onButtonPress : function () {

    this.trigger('press');
},

onPress : function () {

    if (!this.isExpanded()) {
        this.expand();
    }
},

然后事情变得更复杂，如果 Dropdown 的 expand 方法只触发 expand就其本身而言：

expand : function () {

    if (this.isEnabled()) {

        this.setState('expanded', true);

        this.trigger('expand');
    }

    return this;
},

onExpand : function () {

    this.list.show();
},

或者应该是显示是列表：

expand : function () {

    if (this.isEnabled()) {

        this.setState('expanded', true);

        this.list.show();

        this.trigger('expand');
    }

    return this;
},

我想我只是想知道决定在父/子关系中绑定事件的最佳实践。如何避免混乱的情况和可能的循环事件调用。

有人有什么想法吗？

Answer 1

我会简单地使用 DOM 来实现此目的，而不是手动触发事件。如果您希望事件首先命中父级，则将捕获设置为 true，如果您希望事件冒泡，则将捕获设置为 false。

这允许在捕获阶段调用事件处理程序，因此父 DOM 元素首先获取事件：

el.bind('someevent', somefunction, true);

此冒泡，因此子级首先接收事件，并且当子级接收事件时调用处理程序。

el.bind('someevent', somefunction, false);

一般来说，保持简单。您还可以使用委托编程模式，其中父级将获取其自身和子级的事件，这样您就可以避免混乱，并可能节省较大应用程序的内存。