事件

大多数使用类/构造函数构建的Framework7组件（包括Framework7类本身）都具有事件监听器(event emitter)API。

它可以轻松地绑定和处理各种事件，包括组件之间的事件。

Events Handlers in Parameters

当您使用API创建应用程序实例或任何其他组件时，可以在应用程序/组件初始化时通过on参数传递事件处理程序：

var app = new Framework7({
  ...
  on: {
    // each object key means same name event handler
    pageInit: function (page) {
      // do something on page init
    },
    popupOpen: function (popup) {
      // do something on popup open
    },
  },
});

var popup = app.popup.create({
  ...
  on: {
    open: function (popup) {
      // do something on popup open
    }
  }
})

Events Methods

也可以使用如下实例函数添加移除事件:

添加事件处理函数

var app = new Framework7({/*...*/});

var popup = app.popup.create({/*...*/});

app.on('pageInit', function (page) {
  // do something on page init
});

app.on('popupClose', function (popup) {
  // do something on popup close
});

popup.on('open', function (popup) {
  // do something on popup open
});

// Once handler, will work only once
popup.once('close', function (popup) {
  // do something on popup close
});

添加多个实例处理事件

我们可以使用空格将多个事件传递给第一个参数。

app.on('popupOpen popupClose', function (popup) {
  // do something on popupOpen and popupClose
});

移除事件处理

指定名称的处理器可以被移除:

function onTabShow() {
  // do something on tab show
}

// add handler
app.on('tabShow', onTabShow);

// later remove tabShow handler:
app.off('tabShow', onTabShow);

移除所有的事件处理器

如果我们不将第二个处理程序参数传递给.off方法，那么我们将删除为此事件分配的所有处理程序。

// Remove all tabShow handlers
app.off('tabShow');

Emit Events

当然，我们可以发出事件和任何我们可能需要的自定义事件：

app.on('myCustomEvent', function (a, b) {
  console.log(a); // -> 'foo'
  console.log(b); // -> 'bar'
});

app.emit('myCustomEvent', 'foo', 'bar');

Events Delegating

组件上发出的事件也将委托给应用实例：

app.on('something', function () {/*...*/});

popup.on('something', function () {/*...*/});

popup.emit('something'); // will trigger "something" event assigned to both app and popup instances

如果这不是您想要的，可以在组件上发出所谓的local事件。在这种情况下，我们需要使用local::前缀来命名事件。

app.on('something', function () {/*...*/});

popup.on('something', function () {/*...*/});

popup.emit('local::something'); // will only trigger "something" event assigned to popup instance above

Event Handler Context

事件处理程序的上下文（this）将始终指向分配它的实例：

app.on('popupOpen', function () {
  console.log(this); // -> app instance
});
popup.on('popupOpen', function () {
  console.log(this); // -> popup instance
});

Events Bus

Framework7类上的当前事件触发API也非常有用，可以用于在应用组件和模块之间创建自定义事件。

还有一个额外的辅助类，设计用于仅用作事件总线，而不是淹没主应用程序或某些组件实例。

要创建新的事件总线，我们需要调用new Framework7.Events()：

// Create custom events bus
var myEvents = new Framework7.Events();

// handle event
myEvents.on('some-event', function () {
  // do something when 'some-event' fired
})

// emit event
myEvents.emit('some-event');

// Create another event bus
const notificationEvents = new Framework7.Events();

notificationEvents.on('notificationReceived', function (notification) {
  // do something with notification
})

// somewhere in the app send notification
notificationEvents.emit('notificationReceived', {
  title: 'New message',
  from: 'John Doe',
});