Javascript 如何处理事件冒泡？

我正在开发一个小型主干应用程序

我目前遇到的问题是，我想显示一个特定项目的配置文件

单击列表项时会触发此showProfile事件。showProfile事件不需要通知父listView，父listView通知上述sidebarView，后者通知mainView，后者现在可以实例profileView

这将涉及事件链中的三到四个视图。这个问题有可能的解决方法吗

问候,，

---

Bodo

我不知道这是否是最好的方法，但对于这种情况，我使用了应用程序级事件聚合器，创建了一个对象，该对象具有扩展Backbone.Events的事件属性

我倾向于使用相同的对象来存储应用程序范围的设置：

var app = {
    settings: {},
    events: _.extend({}, Backbone.Events),
};

然后，您可以从视图触发showProfile事件，并绑定到mainView中的app.event，而无需在所有父视图中冒泡

使用RequireJS时，我创建了一个应用程序模块，它是我视图的依赖项：

define([
    "jquery",
    "underscore",
    "backbone"
],

function($, _, Backbone) {
   var app = {
       root: "/",
       settings: {},
       events: _.extend({}, Backbone.Events),
   };

 return app;

});

我还倾向于将路由器放在app对象上，以防需要在视图中访问它，因此在my main.js中（如中所示）：

您可能想阅读Derick Bailey关于事件聚合器的博客文章：

---

同意，这类事情涉及到很多样板文件。我尝试过的一种方法是通过使用（视图）方法（如下面定义的方法）将其最小化：

/**
 * Helper to facilitate event-bubbling, that is to say, the scenario where a view
 * binds a callback to a child-View event only to retrigger it, mimicking the
 * inherent event bubbling mechanism of the DOM. Allows renaming of the bubbled
 * event as well as modification of the bubbled arguments
 *
 * @param view The View-dispatcher of the event
 * @param ev Name of the event to bubble
 * @param opts A hash of options where:
 *   bubbleName: New name of the event to bubble in case the event should be
 *   renamed. Optional
 *   args: The arguments to bubble:
 *    - When absent, the original arguments will be bubbled.
 *    - When set to a non-function value or an array-of-values, this value or
 *      values will be bubbled
 *    - When set to a function, it will be invoked on the incoming arguments and
 *      its returned value will be treated as in the previous case.
 */
bubbleEvent: function (view, ev, opts) {
  if (!opts) { opts = {}; }
  view.bind(ev, function () {
    var inArgs = _.toArray(arguments),
        bubbleArgs = _.isFunction(opts.args) ? 
          opts.args.apply(this, inArgs) : (opts.args || inArgs),
        bubbleName = opts.bubbleName || ev;
    this.trigger.apply(this, [bubbleName].concat(bubbleArgs));
  }, this);
}

这将是BaseView的一个成员函数，您的所有其他视图都将扩展它。因此，它将在应用程序的每个视图中都可用。所以，为了让ParentView简单地冒泡一个由owned childView触发的事件，您只需要

bubbleEvent(childView, "event");

---

尽管如此，这还是引入了一些样板文件，因此我也有兴趣看到这个问题的其他解决方案。

如果只是停止事件冒泡的问题，您可以将

事件
对象传递给事件处理程序，并调用
事件.stopPropagatoin（）
以避免冒泡。您也可以查看。您的意思是希望showProfile事件直接通知mainView，跳过中间的列表和侧栏视图吗？@Cyclone我不是指DOM事件冒泡。我指的是骨干队system@MattiJohn是的，在具体情况下，我想从嵌套视图访问我的应用程序路由器。在所有视图上冒泡路由器访问将导致大量的样板代码只是冒泡，而没有良好的功能。。。通过导入requirejs直接使用路由器只能异步工作…嗨，谢谢你的回答。我认为事件聚合器与硬盘耦合或导致新问题，我将继续使用事件冒泡，但我认为它可能会帮助其他人。Regards@muistooshort谢谢，你说得对，我是说{u0.extend（{}，Backbone.Events）。现在修好了。
bubbleEvent(childView, "event");