WeChat Mini Program Tutorial Event-Mini Program Development-php.cn

WeChat Mini Program Tutorial Event

黄舟

Release： 2017-01-16 15:01:38

Original

1477 people have browsed it

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.

Click me!

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

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

Copy after login

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
}
}

Copy after login

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

and the input event of , the scroll event of (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>

Copy after login

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:

DataSet Test

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

Copy after login

touches

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

属性说明

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

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

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

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

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