When an event is triggered in a component, the event handler that is bound to the event at the logical layer receives an event object.
BaseEvent object
The following table describes the attributes of a BaseEvent object.
Attribute | Type | Description |
---|---|---|
type | String | The type of the event |
timeStamp | Integer | The timestamp when the event object is generated |
target | Object | The attribute-value set of the component where the event is triggered |
type
The type of the event.
timeStamp
The timestamp when the event object is generated.
target
The source component object where the event is triggered. The following table describes the attributes of a source component object.
Attribute | Type | Description |
---|---|---|
id | String | The ID of the source component |
tagName | String | The type of the current component |
dataset | Object | The set of custom attributes of the component to which the triggered event is bound. Each custom attribute in the set starts with data- . |
targetDataset | Object | The set of custom attributes of the component where the event is triggered. Each custom attribute in the set starts with data- . |
You can use dataset
to define data in a component. After an event in the component is triggered, the defined data is transferred to the logical layer. Each data item in the dataset starts with data-
. The words that follow are connected by hyphens -
. All the letters must be lowercase and uppercase letters are automatically converted to lowercase letters. For example, for a string data-element-type
, the event.target.dataset
method converts this string to camel case elementType
.
Code sample:
<view data-alpha-beta="1" data-alphaBeta="2" onTap="bindViewTap"> DataSet Test </view>
Page({
bindViewTap:function(event) {
event.target.dataset.alphaBeta === 1; // - Convert the string to camel case.
event.target.dataset.alphabeta === 2; // Convert uppercase letters to lowercase letters.
},
});
CustomEvent object
A CustomEvent
object inherits from a BaseEvent object. The following table describes the attribute of a CustomEvent
object.
Attribute | Type | Description |
---|---|---|
detail | Object | The extra information |
detail
The data carried by the custom event. When an event is triggered in a form component, the generated event object carries user input information. For example, after the onChange event in the switch component is triggered, you can use event.detail.value
to obtain the status value that is selected by the user. When an error event is triggered in a media component, the generated event object carries the error information. For more information, see event descriptions in component documents.
TouchEvent object
A TouchEvent object inherits from a BaseEvent object. The following table describes the attributes of a TouchEvent object.
Attribute | Type | Description |
---|---|---|
touches | Array | The array of the information about the current fixed touch points on the screen |
changedTouches | Array | The array of the information about the current changed touch points |
The touches
attribute is an array of Touch objects that represent the current fixed touch points on the screen. Note that for a Canvas TouchEvent object, the touches
attribute is an array of CanvasTouch objects.
The data format of the “changedTouches” attribute is the same as the data format of the “touches” attribute. The “changedTouches” attribute represents the current changed touch points, such as touchstart, touchmove, touchend, and touchcancel.
Touch object
Attribute | Type | Description |
---|---|---|
identifier | Number | The identifier of the touch point |
pageX, pageY | Number | The coordinates of the touch point, with the upper-left corner of the text as the origin, the horizontal axis as X-axis, and the vertical axis as Y-axis. |
clientX, clientY | Number | The coordinates of the touch point, with the upper-left corner of the area of the page to display as the origin, the horizontal axis as X-axis, and the vertical axis as Y-axis. Note that the area of the page to display equals to the area of the screen minus the area of the navigation bar. |
CanvasTouch object
Attribute | Type | Description |
---|---|---|
identifier | Number | The identifier of the touch point. |
x, y | Number | The coordinates of the touch point, with the upper-left corner of the Canvas as the origin, the horizontal axis as X-axis, and the vertical axis as Y-axis. |