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:

Add Event Handlers

  1. var app = new Framework7({/*...*/});
  3. var popup = app.popup.create({/*...*/});
  5. app.on('pageInit', function (page) {
  6.   // do something on page init
  7. });
  8. app.on('popupClose', function (popup) {
  9.   // do something on popup open
  10. });
  12. popup.on('open', function (popup) {
  13.   // do something on popup open
  16. // Once handler, will work only once
  17. popup.once('close', function (popup) {
  18.   // do something on popup close
  19. });

Add Multiple Handlers

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

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

Remove Event Handlers

Named function handler can be removed:

Remove All Handlers

  1. // Remove all tabShow handlers

Emit Events

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

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

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

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

Event handler context (this) will always point to instance where it was assigned:

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