事件

大多数使用类/构造函数构建的 Framework7 组件（包括 Framework7 类本身）都具有事件发射器 API。

它使我们能够轻松地发射和处理各种事件，包括组件之间的事件。

参数中的事件处理程序

当您使用 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
    }
  }
})

事件方法

也可以使用以下实例方法添加/删除事件处理程序

添加事件处理程序

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