WeChat Mini Program Tutorial Event

What is an event

Events are the communication method from the view layer to the logic layer.

Events can feed back user behavior to the logic layer for processing.

Events can be bound to components. When the trigger event is reached, the corresponding event processing function in the logic layer will be executed.

Event objects can carry additional information, such as id, dataset, touches.

How to use events

Bind an event handling function in the component.

Such as bindtap, when the user clicks on the component, the corresponding event processing function will be found in the Page corresponding to the page.

b6aa15a7f7dc64081d41ada51964248f Click me! de5f4c1163741e920c998275338d29b2

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

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

You can see that 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
}
}

Detailed explanation of events

Event classification

Events are divided into bubbling events and non-bubbling events

1. Bubbling event: When an event on a component is triggered, the event will be passed to the parent node.

2. Non-bubbling events: When an event on a component is triggered, the event will not be delivered to the parent node.

WXML bubbling event list:

Type Trigger condition

touchstart Finger touch

touchmove Finger moves after touching

touchcancel Finger touch action is interrupted, such as incoming call reminder, pop-up window

touchend Finger touch action ends

tap Leave after finger touch

longtap After finger touch , and then leave after more than 350ms

Note: In addition to the above table, other component custom events are non-bubbling events, such as the submit event of e8b36d49ce73ede15e584e9dd86e79e9 and the input event of 0f0306f9b187f2e363126bc29c8b1420 , the scroll event of f22ed720d2ae070222ab6f087b345d61 (see each component for details)

Event binding

The event binding is written in the same way as the component's attributes, in the form of key and value .

The key starts with bind or catch, followed by the type of event, such as bindtap, catchtouchstart

value is a string, and a function with the same name needs to be defined in the corresponding Page. Otherwise, an error will be reported when the event is triggered.

bind event binding will not prevent bubbling events from bubbling upwards, and catch event binding can prevent bubbling events from bubbling upwards.

As in the example below, clicking the inner view will trigger handleTap1 and handleTap2 successively (because the tap event will bubble up to the middle view, and the middle view prevents the tap event from bubbling and will no longer be passed to the parent node) , clicking on the middle view will trigger handleTap2, and clicking on the outer view will trigger 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>

Event Object

Unless otherwise specified, when a component triggers an event, the logic layer binds the event handler to receive an event object.

Attribute list of event object:

Attribute Type Description

type String Event type

timeStamp Integer The timestamp when the event was generated

target Object A collection of some attribute values ​​of the component that triggered the event

currentTarget Object A collection of some attribute values ​​of the current component

touches Array Touch event, array of touch point information

detail Object Additional information

Common event type

timeStamp

The number of milliseconds that elapsed between the page opening and the triggering of the event.

target

The source component that triggers the event.

Attribute Description

id The id of the event source component

dataset A collection of custom attributes starting with data- on the event source component

offsetLeft, offsetTop Offset in the coordinate system of the event source component

currentTarget

The current component to which the event is bound.

Attribute Description

id The id of the current component

dataset A collection of custom attributes starting with data- on the current component

offsetLeft, offsetTop Offset in the coordinate system of the current component

Explanation: target and currentTarget can refer to the above example. When the inner view is clicked, the event objects target and currentTarget received by handleTap3 are both inner, and The target of the event object received by handleTap2 is inner, and the currentTarget is middle

dataset

Data can be defined in the component, and these data will be passed to SERVICE through events. Writing method: Start with data-, multiple words are linked by hyphens -, and cannot contain uppercase letters (uppercase letters will be automatically converted to lowercase letters) such as data-element-type. Finally, hyphens will be converted into camel case in event.target.dataset elementType.

Example:

c85cc59a4b1d845e1ce84ca0f19d5da7 DataSet Test de5f4c1163741e920c998275338d29b2

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

touches

touches是一个触摸点的数组，每个触摸点包括以下属性：

      属性                     说明

pageX,pageY    距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴    

clientX,clientY    距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴    

screenX,screenY    距离屏幕左上角的距离，屏幕左上角为原点，横向为X轴，纵向为Y轴    

特殊事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。

以上就是微信小程序 教程之事件的内容，更多相关内容请关注PHP中文网（www.php.cn）！