父子视图事件绑定关系答案

【问题标题】：Parent to child view event binding relationships父子视图事件绑定关系
【发布时间】：2012-02-22 23:11:53
【问题描述】：

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

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

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

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

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

onButtonPress : function () {

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

    this.trigger('press');
},

而Dropdown 会自行触发 press，因此开发者无需联系 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();
},

或者应该是shows List：

expand : function () {

    if (this.isEnabled()) {

        this.setState('expanded', true);

        this.list.show();

        this.trigger('expand');
    }

    return this;
},

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

有人有什么想法吗？

【问题讨论】：

要确定“最佳”，您首先需要定义衡量标准。
可能：在使用代码时性能最高且易于阅读/记住。

标签： javascript events model-view-controller event-handling dom-events

【解决方案1】：

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

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

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

这个冒泡，因此孩子首先收到事件，当孩子收到事件时调用处理程序。

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

通常保持简单。您还可以使用委托编程模式，其中父级将为自己和子级获取事件，这样您就可以避免混淆，并可能在更大的应用程序中节省内存。

【讨论】：