Framework7 v4 Core 文档翻译（三）

这次翻译 Events 章节。篇幅较短，但非常重要。原文：Events | Framework7 Documentation

使用类 / 构造函数（包括 F7 类本身）构建的大多数 F7 组件都具有事件触发 API，这允许我们很容易地去触发和处理各种事件，包括组件之前的事件。

Events Handles in Parameters 作为参数的事件处理方法

当你使用 API 方法创建实例或组件时，可以在实例或组件的初始化方法的 on 选项中传递事件：

var app = new Framework7({
    // ...
    on: {
        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 事件方法

使用下面的实例方法也可以进行添加 / 删除事件处理方法：

• [instance].on(event, handler) - 添加事件
• [instance].once(event, handler) - 添加一次性的事件（注：作用同 Vue 的 once）
• [instance].off(event) - 移除具体事件
• [instance].emit(event, ...args) - 触发事件

Add Event Handlers 添加事件

var app = new Framework7({/*...*/});

var popup = app.popup.create({/*...*/});

app.on('pageInit', function (page) {
    // ...
});

app.on('popupClose', function (popup) {
    // ...
});

popup.on('open', function (popup) {
    // ...
})

popup.on('close', function (popup) {
    // ...
})

Add Multiple Handlers 添加多个事件

用空格分隔：

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

Remove Event Handlers 移除事件

移除具体的事件：

function onTabShow() {
    // ...
}

app.on('tabShow', onTabShow);
app.ooff('tabShow', onTabShow)

移动所有同名事件：

// 第二个参数省略
app.off('tabShow');

Emit Events 触发事件

我们可以触发任何预设和自定义事件：

app.on('myCustomEvent', function (a, b) {
    console.log(a); // => 'foo'
    console.log(b); // =》 'bar'
});

app.emit('myCustomEvent', 'foo', 'bar');    // (方法名, 参数a, 参数b)

Events Delegating 事件委托

在组件上触发的事件，也会委托到 app 实例（也就是说 app 实例上也会触发）：

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

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

popup.emit('something');    // 组件和 app 实例上的`something`事件都会被触发

要避免这种情况，可以在事件名前加个 local:: 前缀：

popup.emit('local::something'); // 只触发组件上的`something`事件

Event Handler Context 事件处理上下文

在事件处理方法中的 this 总是会指向执行该方法的实例：

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

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

Events Bus 事件总线

目前的 F7 事件 API，对于创建用于组件与模块之间通信的自定义事件同样非常有用。

F7 提供了一个辅助类（helper class）用于创建新的事件总线：

var myEvents = new Framework7.Events();

myEvents.on('some-event', function() {
    // ...
});

myEvents.emit('some-event');

const notificationEvents = new Framework7.Events();

notificationEvents.on('notificationReceived', function(notification) {
    // ...
});

notificationEvents.emit('notificationReceived', {
    title: 'New message',
    from: 'John Doe'
});