Events

    Most of Framework7 components that is built with classes/constructors (including Framework7 class itself) have kind of event emitter API.

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

    Events Handlers in Parameters

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

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

    Events Methods

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

    [instance].on(event, handler) Add event handler
    [instance].once(event, handler) Add event handler that will be removed after it was fired
    [instance].off(event) Remove all handlers for specified event
    [instance].emit(event, ...args) Fire event on instance

    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

    Named function handler can be removed:

    function onTabShow() {
      // do something on tab show
    }
    
    // add handler
    app.on('tabShow', onTabShow);
    
    // later remove tabShow handler:
    app.off('tabShow', onTabShow);

    Remove All Handlers

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

    // Remove all tabShow handlers
    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 Delegating

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

    app.on('something', function () {/*...*/});
    
    popup.on('something', function () {/*...*/});
    
    popup.emit('something'); // will trigger "something" event assigned to both app and popup instances
    

    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
    

    Event Handler Context

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

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