WeChat small program event

What is an event

---

• Events are how the view layer communicates to the logical layer.
• Events can feedback the user's behavior to the logical layer for processing.
• Events can be bound to a component, and when a trigger event is reached, the corresponding event handler in the logical layer is executed.
• Event objects can carry additional information such as id, dataset, touches.

How events are used

---

• Bind an event handler in a component.

For bindtap when the user clicks on the component, the appropriate event handler is found in page on the page.

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

• Write the appropriate event handler in the corresponding Page definition, and the argument is event.

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

• You can see that the information from the log is roughly as follows

  {
  "type": "tap",
  "timeStamp":895,
  "target": {
    "id": "tapTest",
    "dataset": {
     "hi": "WeChat"
    }
  },
  "currentTarget": {
    "id": "tapTest",
    "dataset": {
      "hi": "WeChat"
    }
  },
  "detail": {
    "x":53,
    "y":14
  },
  "touches": [{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14,
  }],
  "changedTouches": [{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14,
  }],
  }

The event is detailed

Event classification

Events are divided into bubbling events and non-bubble events

1. Bubble event: When an event on a component is triggered, the event is passed to the parent node.
2. Non-bubble event: When an event on a component is triggered, the event is not passed to the parent node.

List of bubbling events for WXML:

Type	The trigger condition
touchstart	The finger touch action begins
touchmove	Move your finger when you touch it
touchcancel	Finger touch movements are interrupted, such as a call alert, and a window is played
touchend	The finger touch action ends
tap	Leave as soon as your finger is touched
longtap	After the finger is touched, more than 350ms is left

Note: All component custom events other than the table above are <scroll-view/> events, such as the submit input event for <form/> <input/> scroll )

Event binding

---

Event binding is written as a component's property, in the form of key, value.

• Key bind catch and then keeps up with the type of bindtap catchtouchstart
• Value is a string that needs to define a function with the same name in the corresponding Page. O therwise, errors are reported when an event is triggered.

bind binding does not prevent bubbling events from bubbling up, catch event binding prevents bubbling events from bubbling up.

As in the latest example, clicking on inner view triggers handleTap3 and handleTap2 (because the tap event bubbles to middle view, and middle view prevents the tap event from bubbling and no longer passes to the parent node), clicking on middle view triggers handleTap2 and clicking outter handleTap1

<view id="outter" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

The event object

---

Without special instructions, when a component triggers an event, the handler of the logical layer binding the event receives an event object.

BaseEvent list of underlying event object properties:

Property	Type	Description
type	String	The type of event
timeStamp	Integer	The timestamp at the time the event was generated
target	Object	A collection of property values for the component that triggered the event
currentTarget	Object	A collection of some property values for the current component

CustomEvent Custom Event Object Properties List (Inherit BaseEvent):

type

The common event type

timeStamp

The number of milliseconds that the page opened to trigger the event.

target

The source component that triggered the event.

Property	Type	Description
Id	String	The id of the event source component
tagName	String	The type of the current component
dataset	Object	A collection of custom properties data- on the event source component

currentTarget

The current component of the event binding.

Property	Type	Description
Id	String	The id of the current component
tagName	String	The type of the current component
dataset	Object	A collection of custom data- current component that begin with data-

Description: Target and currentTarget can refer to the example above, when clicking inner view, handleTap3 receives the event object target and currentTarget are both inner, handleTap2 receives the event object target inner, currentTarget is middle.

dataset

Data can be defined in a component that is passed through events to the SERVICE. How to data- and multiple words are linked - not capitals (capitals automatically turn to smaller) data-element-type and eventually in event.target.dataset, the hyphens are turned elementType

Example:

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

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

touches

Touches is an array, each element is a Touch object (the touches that are carried in the canvas touch event are canvasTouch arrays). Represents the touch point that is currently stuck on the screen.

Touch object

Property	Type	Description
identifier	Number	The identifier of the touch point
pageX, pageY	Number	The distance from the upper-left corner of the document, the upper-left corner of the document is the origin, the landscape is the X-axis, and the portrait is the Y-axis
clientX, clientY	Number	Distance from the page shows the distance in the upper left corner of the area (screen removes the navigation bar), with the X-axis in the landscape and the Y-axis in portrait

CanvasTouch object

Property	Type	Description	Special instructions
identifier	Number	The identifier of the touch point
x, y	Number	At the distance from the upper left corner of Canvas, the upper left corner of Canvas is the origin, the X-axis is horizontal, and the vertical is the Y-axis

changedTouches

ChangedTouches data format with touches. Represents a changed touch point, such as a touchstart, a touchmove, a touchmove, a touchend, touchcancel.

detail

Custom events carry data, such as the submission event for a form component that carries the user's input, and media error events that carry error messages, as detailed in the definition of each event in the component definition.

Clicking detail of the event with x, y and pageX, pageY represents the distance from the upper left corner of the document.