Tutorial-Event zum WeChat Mini-Programm

Was sind Ereignisse?

Ereignisse sind die Kommunikationsmethode von der Ansichtsschicht zur Logikschicht.

Ereignisse können das Benutzerverhalten zur Verarbeitung an die Logikschicht zurückmelden.

Ereignisse können an Komponenten gebunden werden. Wenn das Triggerereignis erreicht ist, wird die entsprechende Ereignisverarbeitungsfunktion in der Logikschicht ausgeführt.

Ereignisobjekte können zusätzliche Informationen wie ID, Datensatz und Berührungen enthalten.

So verwenden Sie Ereignisse

Binden Sie eine Event-Handler-Funktion in die Komponente.

Wenn der Benutzer beispielsweise bei bindtap auf die Komponente klickt, wird die entsprechende Ereignisverarbeitungsfunktion auf der entsprechenden Seite der Seite gefunden.

b6aa15a7f7dc64081d41ada51964248f Klicken Sie auf mich! de5f4c1163741e920c998275338d29b2

Schreiben Sie die entsprechende Seitendefinition ein Ereignisverarbeitungsfunktion, der Parameter ist Ereignis.

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

Sie können sehen, dass die Protokollinformationen ungefähr wie folgt lauten

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

Detaillierte Erklärung der Ereignisse

Ereignisklassifizierung

Ereignisse sind unterteilt in sprudelnde Ereignisse und nicht sprudelnde Ereignisse

1. Sprudelnde Ereignisse: Wenn ein Ereignis auf einer Komponente ausgelöst wird, wird das Ereignis an den übergeordneten Knoten übermittelt.

2. Nicht sprudelnde Ereignisse: Wenn ein Ereignis auf einer Komponente ausgelöst wird, wird das Ereignis nicht an den übergeordneten Knoten übermittelt.

WXML-Bubbling-Ereignisliste:

Typ Auslöserbedingung

Touchstart Fingerberührung

Touchmove Finger nach Berührung bewegen

TouchCancel Finger-Touch-Aktion wird unterbrochen, z. B. Erinnerung an eingehende Anrufe, Popup-Fenster

Touchend Finger-Touch-Aktion endet

Tippen Sie auf Finger-Touch und gehen Sie, gehen Sie nach mehr als 350 ms

Hinweis: Zusätzlich zur obigen Tabelle gibt es auch andere benutzerdefinierte Komponentenereignisse, z. B. das Submit-Ereignis von e8b36d49ce73ede15e584e9dd86e79e9 und das Eingabeereignis von 0f0306f9b187f2e363126bc29c8b1420 f22ed720d2ae070222ab6f087b345d61 (Einzelheiten finden Sie in den einzelnen Komponenten)

Ereignisbindung

Die Ereignisbindung wird auf die gleiche Weise wie die Attribute der Komponente in Form von Schlüssel und Wert geschrieben .

Der Schlüssel beginnt mit „bind“ oder „catch“, gefolgt von der Art des Ereignisses, z. B. „bindtap“, „catchtouchstart“

Wert ist eine Zeichenfolge, und eine Funktion mit demselben Namen muss im entsprechenden definiert werden Seite. Andernfalls wird beim Auslösen des Ereignisses ein Fehler gemeldet.

Die Bindung von Bindungsereignissen verhindert nicht, dass sprudelnde Ereignisse nach oben sprudeln, und die Bindung von Fangereignissen kann verhindern, dass sprudelnde Ereignisse nach oben sprudeln.

Wie im Beispiel unten werden durch Klicken auf die Innenansicht nacheinander handleTap1 und handleTap2 ausgelöst (da das Tap-Ereignis in die mittlere Ansicht sprudelt und die mittlere Ansicht verhindert, dass das Tap-Ereignis sprudelt und dies nicht mehr der Fall ist). an den übergeordneten Knoten übergeben) wird durch Klicken auf die mittlere Ansicht handleTap2 ausgelöst, und durch Klicken auf die äußere Ansicht wird handleTap1 ausgelöst.

Ereignisobjekt

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

Sofern nicht anders angegeben, empfängt die Handlerfunktion, die von der Logikschicht an das Ereignis gebunden ist, ein Ereignisobjekt, wenn eine Komponente ein Ereignis auslöst.

Attributliste des Ereignisobjekts:

Attributtypbeschreibung

Typ String Ereignistyp

timeStamp Integer Der Zeitstempel, als das Ereignis generiert wurde

target Object Eine Sammlung einiger Attributwerte der Komponente, die das Ereignis ausgelöst hat

currentTarget Object Eine Sammlung einiger Attributwerte der aktuellen Komponente

touches Array Ein Array von Berührungsereignisse, Berührungspunktinformationen

Detailobjekt Zusätzliche Informationen

Gemeinsamer Ereignistyp

timeStamp

Die Anzahl der Millisekunden, die seit dem Öffnen der Seite vergangen sind bis das Ereignis ausgelöst wurde.

Ziel

Die Quellkomponente, die das Ereignis auslöst.



Attributbeschreibung

id Die ID der Ereignisquellenkomponente

dataset Eine Sammlung benutzerdefinierter Attribute, beginnend mit data- für die Ereignisquellenkomponente

offsetLeft, offsetTop Offset im Koordinatensystem der Ereignisquellkomponente

currentTarget

Die aktuelle Komponente, an die das Ereignis gebunden ist.



Attributbeschreibung

id Die ID der aktuellen Komponente

Datensatz Eine Sammlung benutzerdefinierter Attribute, beginnend mit data- für die aktuelle Komponente

offsetLeft, offsetTop Offset im Koordinatensystem der aktuellen Komponente

Erklärung: target und currentTarget können sich auf das obige Beispiel beziehen. Wenn auf die innere Ansicht geklickt wird, werden die Ereignisobjekte target und currentTarget von handleTap3 empfangen Sowohl inner als auch Das von handleTap2 empfangene Ereignisobjektziel ist inner und das currentTarget ist middle

dataset

Daten können in der Komponente definiert werden und diese Daten werden an SERVICE weitergeleitet Ereignisse. Schreibmethode: Beginnend mit data- werden mehrere Wörter durch Bindestriche verknüpft und dürfen keine Großbuchstaben enthalten (Großbuchstaben werden automatisch in Kleinbuchstaben umgewandelt), wie z. B. data-element-type. Schließlich werden Bindestriche in Camel Case umgewandelt event.target.dataset elementType.

Beispiel:

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）！