事件

大部分使用類別/建構函式建置的 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',
});