小程式學習---事件（二）

<b>一、事件對象</b>

如無特殊說明，當元件觸發事件時，邏輯層綁定該事件的處理函數會收到一個事件對象。

<b>1</b><b>、BaseEvent 基礎事件對象屬性清單：</b><b></b>

屬性

類型

說明

<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html#type">type</a>

String

事件類型

<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html#timeStamp">timeStamp</a>

Integer

事件生成時的時間戳

<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html#target">target</a>

Object

觸發事件的元件的一些屬性值集合

<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html#currenttarget">currentTarget</a>

目前元件的一些屬性值集合

<b> </b>

<b>2</b><b>、CustomEvent 自定義事件對象屬性清單（繼承 BaseEvent）：</b>

<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html#detail">detail</a>

額外的資訊

<b>3</b><b>、TouchEvent 觸摸事件對象屬性清單（繼承 BaseEvent）：</b>

<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html#touches">touches</a>

Array

觸摸事件，目前停留在螢幕中的觸摸點資訊的數組

<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html#changedTouches">changedTouches</a>

觸摸事件，目前變化的觸摸點資訊的數組

<b>特殊事件：<b> 中的觸摸事件不可冒泡，是以沒有 currentTarget。</b></b>

二、事件類型詳解

<b>1</b><b>、type</b>

代表事件的類型。

<b>2</b><b>、timeStamp</b>

頁面打開到觸發事件所經過的毫秒數。

<b>3</b><b>、target</b>

觸發事件的源元件。

id

事件源元件的id

tagName

目前元件的類型

<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html#dataset">dataset</a>

事件源元件上由data-開頭的自定義屬性組成的集合

<b>4</b><b>、currentTarget</b>

事件綁定的目前元件。

說明： target 和 currentTarget 可以參考上例中，點選 inner view 時，handleTap3 收到的事件對象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件對象 target 就是 inner，currentTarget 就是 middle。

<b>5</b><b>、dataset</b>

在元件中可以定義資料，這些資料将會通過事件傳遞給 SERVICE。 書寫方式： 以data-開頭，多個單詞由連字元-連結，不能有大寫(大寫會自動轉成小寫)如data-element-type，最終在 event.currentTarget.dataset 中會将連字元轉成駝峰elementType。

點選(此處)折疊或打開

view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"&gt; DataSet Test /view&gt;

Page({

  bindViewTap:function(event){

    event.currentTarget.dataset.alphaBeta === 1 // - 會轉為駝峰寫法

    event.currentTarget.dataset.alphabeta === 2 // 大寫會轉為小寫

  }

})

<b>6</b><b>、touches</b>

touches 是一個數組，每個元素為一個 Touch 對象（canvas 觸摸事件中攜帶的 touches 是 CanvasTouch 數組）。 表示目前停留在螢幕上的觸摸點。

<b>7</b><b>、Touch 對象</b>

identifier

Number

觸摸點的辨別符

pageX, pageY

距離文檔左上角的距離，文檔的左上角為原點 ，橫向為X軸，縱向為Y軸

clientX, clientY

距離頁面可顯示區域（螢幕除去導覽列）左上角距離，橫向為X軸，縱向為Y軸

<b>8</b><b>、CanvasTouch 對象</b>

x, y

距離 Canvas 左上角的距離，Canvas 的左上角為原點 ，橫向為X軸，縱向為Y軸

<b>9</b><b>、changedTouches</b>

changedTouches 資料格式同 touches。 表示有變化的觸摸點，如從無變有（touchstart），位置變化（touchmove），從有變無（touchend、touchcancel）。

<b>10</b><b>、detail</b>

點選事件的detail 帶有的 x, y 同 pageX, pageY 代表距離文檔左上角的距離。