事件

大多数 Framework7 组件都是用类/构造器构建的（包括 Framework7 类本身），它们都有事件发射器 API。

它允许我们轻松地发射和处理各种类型的事件，包括组件之间的事件。

参数中的事件处理器

当你使用 API 创建应用实例或任何其他组件时，可以在应用/组件初始化时传递事件处理器onparameter:

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

事件方法

也可以使用以下实例方法添加/移除事件处理器：

添加事件处理器

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

发射事件

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

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

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

事件委托

组件上发射的事件也会委托给应用实例：

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

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

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

如果这不是你想要的，你可以在组件上发射所谓的本地事件。在这种情况下，我们需要在事件名称前加上local::

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

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

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

事件处理器上下文

事件处理器上下文 (this) 总是指向它被分配的实例：

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

事件总线

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',
});