Event Object
When the component triggers the event, the event handler bounded with the logic layer receives an event object.
BaseEvent
BaseEvent basic event object attribute list:
| Attribute | Type | Description |
| type | String | Event type |
| timeStamp | Integer | event generated timestamp |
| target | Object | Attribute value set of the component triggering the event |
Type
Type: Event type
Timestamp
timeStamp: Event generated timestamp
Target
dataset define data in component, and the data is transferred via event to the logic layer. Start with data- and use hyphen - to connect multiple words which must be in lower case (upper case automatically converted into lower case). For example, the data-element-type will eventually convert the hyphen into hump elementType in the event.target.dataset.
Sample codes:
<view data-alpha-beta="1" data-alphaBeta="2" onTap="bindViewTap"> DataSet Test </view>Page({
bindViewTap:function(event){
event.target.dataset.alphaBeta === 1 // - Will convert into hump writing
event.target.dataset.alphabeta === 2 // Upper case converted into lower case
}
})Target: source component object that triggers the event, attribute list:
| Attribute | Type | Description |
| id | String | event source component id |
| tagName | String | current component type |
| dataset | Object | Set of custom attributes starting with data- on component bound with the event |
| targetDataset | Object | Set of custom attributes starting with data- on component actually triggering the event |
CustomEvent
CustomEvent custom event object attribute list (inherited from BaseEvent)
| Attribute | Type | Description |
| detail | Object | Additional information |
Detail
Data carried in custom event The form component event carries user entry information. For example, the switch component, when onChange trigger, gets user selected status value via event.detail.value. The media error event carries error information. For details, see the component document event description.
TouchEvent
TouchEvent touch event object attribute list (inherited from BaseEvent)
| Attribute | Type | Description |
| touches | Array | Array of touch point information staying current on the screen |
| changedTouches | Array | Array of touch point information changing currently |
The touches is an array. Each of its elements is a Touch object (the touches carried in the canvas touch event is the CanvasTouch array), indicating the touch point staying on the screen.
changedTouches data format is the same as  touches. Indicates changing touch point, such as from none to start (touchstart), location change (touchmove), from touch to end (touchend, touchcancel).
Touch Object
| Attribute | Type | Description |
| identifier | Number | touch point identifier |
| pageX, pageY | Number | distance to the document upper-left corner, the upper-left corner as origin, horizontal direction as x axis and vertical direction as y axis |
| clientX, clientY | Number | distance to the displayable region of page (screen except for navigation bar), the upper-left corner as origin, horizontal direction as x axis and vertical direction as y axis |
CanvasTouch Object
| Attribute | Type | Description |
| identifier | Number | touch point identifier |
| x, y | Number | distance to the Canvas upper-left corner, the Canvas upper-left corner as origin, horizontal direction as x axis and vertical direction as y axis |
Sample
Take touchMove event as an example, when user touch the following component.
<view class="move-view" onTouchMove="touchMoveHandle">
</view>The touchMoveHandle will be invoked in the page, the TouchEvent will act as the parameter.
Page({
touchMoveHandle(e){
console.log(e)
}
});The console output
{
"type": "touchMove",
"timeStamp": 1562241425847,
"target": {
"targetDataset": {},
"tagName": "view",
"dataset": {},
"offsetLeft": 0,
"offsetTop": 0
},
"currentTarget": {
"tagName": "view",
"dataset": {},
"offsetLeft": 0,
"offsetTop": 0
},
"touches": [
{
"clientX": 49.69140625,
"clientY": 54.1640625,
"identifier": 0,
"pageX": 49.69140625,
"pageY": 54.1640625
}
],
"changedTouches": [
{
"clientX": 49.69140625,
"clientY": 54.1640625,
"identifier": 0,
"pageX": 49.69140625,
"pageY": 54.1640625
}
]
}