事件

绝大部分由类或构造器生成的 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
    }
  }
})

通过方法触发事件

还可以通过以下示例绑定或删除事件处理器:

[instance].on(event, handler) 绑定事件处理器
[instance].once(event, handler) 绑定一次性事件处理器,事件触发一次之后自动移除
[instance].off(event) 移除指定事件的所有处理器
[instance].emit(event, ...args) 手动触发事件

绑定事件

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

绑定多个事件

第一个参数使用英文空格隔开,可以同时绑定多个事件,如下所示:

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

移除事件绑定

可以移除指定 function 所绑定的事件,如下所示:

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 实例处理:

app.on('something', function () {/*...*/});

popup.on('something', function () {/*...*/});

popup.emit('something'); // will trigger "something" event assigned to both app and popup instances

如果你不希望事件委托给 app 实例,则你可以通过在调用事件的时候,指定一个前缀 local::,即可将事件调用的设置为 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
});