Event Object

2022-07-04 03:44

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:

Property	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:

copy

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

copy

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:

Property	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)

Property	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)

Property	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

Property	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

Property	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.

copy

<view class="move-view" onTouchMove="touchMoveHandle">
</view>

The touchMoveHandle will be invoked in the page, the TouchEvent will act as the parameter.

copy

Page({
  touchMoveHandle(e){
    console.log(e)
  }
});

The console output

copy

{
  "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
    }
  ]
}