Events

It allows us easily to emit and handle all kind of events, including events between components.

When you create app instance or any other component using API, you can pass event handler on app/component initialization in parameter:

It also possible to add/remove event handlers using the following instance methods:

Add Event Handlers

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

Add Multiple Handlers

We can pass multiple events in first parameters separated with space:

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

Remove Event Handlers

Remove All Handlers

If we don’t pass second handler argument to .off method then we will remove all handlers assigned for this event:

app.off('tabShow');

Emit Events

And of course we can emit events and any kind of custom events we may need:

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

Events which emitted on components will delegate to app instance as well:

If this is not what you want, it is possible to emit so called local events on components. In this case we need to prefix event name with local::

app.on('something', function () {/*...*/});
popup.on('something', function () {/*...*/});
popup.emit('local::something'); // will only trigger "something" event assigned to popup instance above

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

Current events emitter API on Framework7 classes is also very useful to create custom events for communication between app components and modules.

And there is an additional helper class that is designed to be used like event bus only and not to flood main app or some components instances.

To create new events bus we need to call new Framework7.Events():

← Initialize App