WeChat mini-app tutorials

Events can be bound to components. When an event is triggered, the corresponding event processing function in the logic layer is executed. What is an event?

Events are the communication between the view layer and the logic layer.

Events can be fed back to the logic layer for processing.

Events can be bound to components. When an event is triggered, the corresponding event processing function in the logic layer is executed.

The event object can carry additional information, such as id, dataset, and touches.

Event usage

Bind an event handler to a component.

For example, if you click bindtap, the corresponding event processing function is found in the corresponding Page of the Page when you click this component.

Click me!

Write the corresponding event processing function in the corresponding Page definition. the parameter is event.

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

The log information is roughly as follows:

{"type": "tap","timeStamp": 1252,"target": { "id": "tapTest", "offsetLeft": 0, "offsetTop": 0, "dataset": { "hi": "MINA" }},"currentTarget": { "id": "tapTest", "offsetLeft": 0, "offsetTop": 0, "dataset": { "hi": "MINA" }},"touches": [{ "pageX": 30, "pageY": 12, "clientX": 30, "clientY": 12, "screenX": 112, "screenY": 151}],"detail": { "x": 30, "y": 12}}

Event Details

Event category

Events are classified into bubble 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 transmitted to the parent node.

List of WXML bubble events:

Type trigger condition

Touchstart finger touch

Touchmove move after touch

Touchcancel: the touch of your finger is interrupted, such as a pop-up notification.

Touchend: The finger touch action ends.

Tap finger touch and exit

After the longtap finger is touched, it leaves after Ms

Note: All custom events of other components except the preceding table are non-bubble events, as shown in figure

Submit event, Input event, (For details, refer to each component)

Event binding

The event binding method is similar to the component property, in the form of key and value.

The key starts with bind or catch and follows the event type, such as bindtap and catchtouchstart.

Value is a string. you need to define a function with the same name in the corresponding Page. Otherwise, an error is reported when an event is triggered.

Bind event binding does not prevent the bubble event from bubbling up. the catch event binding prevents the bubble event from bubbling up.

For example, in the following example, clicking inner view will trigger handleTap1 and handleTap2 successively (because the tap event will bubble to the middle view, and the middle view will prevent the tap event from bubbling, if you click "middle view", handleTap2 is triggered. if you click "outter view", handleTap1 is triggered.

  
      outer view   
   
       middle view   
    
         inner view   
       
     
  

Event object

Unless otherwise stated, when a component triggers an event, the processing function bound to the event on the logic layer will receive an Event object.

Attribute List of event objects:

Attribute type description

Type String event type

TimeStamp the timeStamp when the Integer event is generated

Set of attribute values of the target Object component that triggers the event

Set of property values of the current component of currentTarget Object

Touches Array touch event, an Array of touch point information

Extra detail Object information

Common event types

TimeStamp

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

Target

The source component that triggers the event.

Attribute description

Id: id of the event source component

The dataset event source component is a set of custom attributes starting with data -.

OffsetLeft, offsetTop event source component offset in the coordinate system

CurrentTarget

The current component bound to the event.

Attribute description

Id: id of the current component

The current dataset component is a set of custom attributes starting with data -.

OffsetLeft, offsetTop offset in the coordinate system of the current component

Note: for details about target and currentTarget, refer to the previous example. when you click inner view, the event objects target and currentTarget received by handleTap3 are both inner, and the event object target received by handleTap2 is inner and currentTarget is middle.

Dataset

Data can be defined in components, which are passed to the SERVICE through events. Writing Method: During get. dataset, the connected characters are converted to the camper elementType.

Example:

DataSet Test

Page ({bindViewTap: function (event) {event.tar get. dataset. alphaBeta = 1 //-it will be converted into the camper method event.tar get. dataset. alphabeta = 2 // converts uppercase letters to lowercase letters }})

Touches

Touches is an array of touch points. each touch point includes the following attributes:

Attribute description

The distance between pageX and pageY in the upper left corner of the document. the upper left corner of the document is the origin, the horizontal side is the x axis, and the vertical side is the y axis.

ClientX, clientY distance from the area displayed on the page (excluding the navigation bar on the screen) in the upper left corner of the distance, horizontal x axis, vertical Y axis

The distance between screenX and screenY in the upper left corner of the screen. the upper left corner of the screen is the origin, the horizontal side is the x axis, and the vertical side is the y axis.

Data carried by special events. for example, the submission event of the form component carries user input, and the error event of the media carries error information. for details, see the definition of each event in the component definition.

The above is the event content of the mini-program tutorial. For more information, see The PHP Chinese website (www.php.cn )!