All Products
Search
Document Center

Event object

Last Updated: Feb 04, 2021

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:

 
  1. <view data-alpha-beta="1" data-alphaBeta="2" onTap="bindViewTap"> DataSet Test </view>
 
  1. Page({
  2. bindViewTap:function(event) {
  3. event.target.dataset.alphaBeta === 1; // - Convert the string to camel case.
  4. event.target.dataset.alphabeta === 2; // Convert uppercase letters to lowercase letters.
  5. },
  6. });

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.