父子视图事件绑定关系

Question

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

我有一个Dropdown ，其中包含一个Button和一个List 。 在描述操作时，您按下按钮并显示列表。 您单击列表中的一个项目，然后该项目被选中并且列表消失。

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

因此，例如，而不是这样做： this.dropdown.button.press(); , Dropdown提供了自己的press方法， Dropdown调用Button的 press 方法。

当用户按下按钮时， 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();
},

或者它应该是show List的那个：

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

一般来说，保持简单。 您还可以使用委托编程模式，其中父项将为自己和子项获取事件，因此您可以避免混淆，并可能为更大的应用程序节省内存。