イベント

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`メソッドに2番目のハンドラー引数を渡さない場合、そのイベントに割り当てられたすべてのハンドラーが削除されます。

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