Mobile Platform as a Service:Event introduction

• An event is used for communication between the view layer and the logical layer.
• An event can pass user behavior to the logical layer for processing.
• You can bind an event to a component. When the event is triggered, the corresponding event handler at the logical layer is executed.
• An event object can carry extra information, such as the id, dataset, and touches attributes.

Usage

To bind an event handler, for example onTap, to a component, define the corresponding onTap event handler in the Page object in the .js file of the page.

<view id="tapTest" data-hi="Alipay" onTap="tapName">
  <view id="tapTestInner" data-hi="AlipayInner">
    Click me! 
  </view>
</view>

In the relevant Page object, define the corresponding event handler tapName with the event object as the parameter.

Page({
  tapName(event) {
    console.log(event);
  },
});

The event information generated in the console is shown as follows.

{
  "type": "tap",
  "timeStamp": 1550561469952,
  "target": {
    "id": "tapTestInner",
    "dataset": {
      "hi": "Alipay"
    },
    "targetDataset": {
      "hi": "AlipayInner"
    }
  },
  "currentTarget": {
    "id": "tapTest",
    "dataset": {
      "hi": "Alipay"
    }
  }
}

When you use a basic component, an extension component, or a custom component, whether an event is available depends on whether the component supports the event. You can find the supported events of each component in the component document.

Event type

Events are classified into the following two types:

• Bubbling event: The name of a bubbling event starts with the prefix on. After a bubbling event is triggered in a component, the event will be transferred to the parent node.
• Non-bubbling event: The name of a non-bubbling event starts with the prefix catch. After a non-bubbling event is triggered in a component, the event will not be transferred to the parent node.

The syntax of event binding is similar to the syntax of a component attribute and consists of a key and a value.

• A key starts with on or catch, followed by the event type. For example, the key can be onTap or catchTap.
• A value is a string that corresponds to the function name defined in the Page object. If the corresponding function name does not exist, an error occurs.

<view id="outter" onTap="handleTap1">
  view1
  <view id="middle" catchTap="handleTap2">
    view2
    <view id="inner" onTap="handleTap3">
      view3
    </view>
  </view>
</view>

Refer to the preceding code. A tap on view3 triggers handleTap3 and handleTap2 in order, because the tap event bubbles to view2 and view2 stops the tap event from going up to the parent node. A tap on view2 triggers handleTap2. A tap on view1 triggers handleTap1.

The following table describes all the types of bubbling events.