What is an event?

• Events are the communication method from the presentation layer to the logical layer.
• Events can give feedback of users’ actions to the logical layer for processing.
• Events can be bound to components, and when the trigger condition is reached, the corresponding event function in the logical layer will be executed.
• The event object can carry additional information, such as id, dataset, touche

How to use

Events include bubbling events and non-bubbling events:

• Bubbling event: When an event on a component is triggered, the event will be delivered to the parent node.
• Non-bubbling event: When an event on a component is triggered, the event will not be delivered to the parent node.

The writing method of event binding in the form of “key” and “value”is the same as the attribute of components

• The key starts with “on” or “catch”, plus the type of events such as onTap, catchTap
• “value” is a string, and a function with the same name needs to be defined in the corresponding “Page”. Otherwise, an error will be reported when the event is triggered.

The “on” event binding can not prevent the bubbling event from being passed up, while the “catch” event binding can do so.

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

In the above code, clicking on “view3” will trigger “handleTap3” and “handleTap2” successively (The “tap” event will be passed to “view2”, and “view2” will prevent the “tap” event from bubbling which will no longer be passed to the parent node). Clicking on “view2” will trigger “handleTap2”, and clicking on “view1” will trigger “handleTap1”.

List of bubbling events:

Other events do not bubble up:

• Bind an event handler function in the component.
  For example of “onTap” when users click on the component, the corresponding event handler will be found in the corresponding “Page” of the page.

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

• Write the corresponding event processing function in the corresponding “Page” definition, and the parameter is “event”:

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

• You can see that the information in the “log”is as follows:

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

  Event object

When the component triggers an event, the logical layer bound to the event handler will receive an event object

• BaseEvent： A list of basic event object attributes. | Attribute | Type | Description | | —- | —- | —- | | type | String | Event type | | timeStamp | Integer | Timestamp when the event was generated | | target | Object | The collection of attribute values of the componenttriggering the event |

• CustomEvent：Attribute list of custom event object (extending BaseEvent). | Attribute | Type | Description | | —- | —- | —- | | detail | Object | Additional information |

• TouchEvent：Attribute list of custom event object (inherited from BaseEvent). | Attribute | Type | Description | | —- | —- | —- | | touches | Array | Array of touch point information currently staying on the screen | | changedTouches | Array | Current changing array of touch point information |

• Type: The type of event.

• timeStamp：The number of milliseconds that have elapsed since the page was opened to the trigger event.

• target：The source component triggering the event. | Attribute | Type | Description | | —- | —- | —- | | id | String | ID of the event source component | | tagName | String | The type of the current component | | dataset | Object | A collection of custom attributes starting with “data-” on the component to which the event is bound | | targetDataset | Object | The component that actually triggers the event is determined by
  a collection of custom attributes starting with “data-” |

dataset

Data can be defined in the component, and these data will be passed to the logical layer through events.

Writing style: It starts with “data-” with multiple words linked by a hyphen (-) without uppercase letter(Uppercase letters will be automatically converted into lowercase letter. For example，“data-element-type” will eventually converthyphen to camel case “elementType” in the “dataset”.

Code example:

<view data-alpha-beta="1" data-alphaBeta="2" onTap="bindViewTap"> DataSet Test </view>

Page({
bindViewTap:function(event){
event.target.dataset.alphaBeta === 1 // - 会转为驼峰写法
event.target.dataset.alphabeta === 2 // 大写会转为小写
}
})

touches

“touches” is an array with each element a “Touch” object (the “touches” carried in the “canvas” touch event is an array of “CanvasTouch”), which represents the touch point currently staying on the screen.

• Touch object | Attribute | Type | Description | | —- | —- | —- | | identifier | Number | Identifier of the touch point | | pageX, pageY | Number | The distance ranges from the upper left corner of the document. the upper left corner is the origin, the horizontal axis is the X axis, and the vertical axis is the Y axis | | clientX, clientY | Number | The distance ranges from the upper left of the displayable area on the screen (excluding the navigation bar on the screen). The horizontal axis is the X axis, and the vertical axis is the Y axis. |

• CanvasTouch Object | Attribute | Type | Description | | —- | —- | —- | | identifier | Number | Identifier of the touch point | | x, y | Number | The distance ranges from the upper left corner of the document. the upper left corner is the origin, the horizontal axis is the X axis, and the vertical axis is the Y axis |

• changedTouches: The data format of “changedTouches” is the same as “touches”,indicating a changing touch point , such as change from invariance (touchstart), position change (touchmove), and change from presence (touchend, touchcancel).

• detail: The data are carried by the custom event. For example, the submission event of the form component will carry the user’s input information, and the media error event will carry the error information. For detailed description, please refer to the definition of each event in the component definition.