支付寶小程序頁面邏輯處理之事件(onTap,onTouchStart,onTouchMove,onTouchEnd)

我們知道在前端開發中事件是交互中最重要的概念。那麼在支付寶小程序開發中也不例外，他是交互中非常重要的因素。但是在移動端由於界面和用戶動作的原因我們常用的事件就是Tap和Touch事件。

關於這部分的視頻教學請大家前往： https://edu.csdn.net/course/detail/5750

事件使用範例

頁面代碼：

<button id="clickbtn" data-user-name="Mr.Wei" type="primary" size="mini" onTap="defaultTap">點擊我</button>

js代碼：

defaultTap(event) {
    console.log(event.target.dataset.userName)
    console.log('點擊者的姓名爲：');
 },

這就是tap事件

常用的事件

類型	觸發條件
touchStart	觸摸動作開始
touchMove	觸摸後移動
touchEnd	觸摸動作結束
touchCancel	觸摸動作被打斷，如來電提醒，彈窗
tap	觸摸後馬上離開
longTap	觸摸後，超過300ms再離開

事件冒泡

時間冒泡其實解釋起來是個非常抽象的東西。我用僞代碼給大家解釋下

<我是爺爺 鬧鐘響後=“看報”>
    <我是爸爸  鬧鐘響後=“上班”>
        <我是兒子 鬧鐘響後=“”上學>
        </我是兒子>
    </我是爸爸>
</我是爺爺>

那這三代都有一個時間就是“鬧鐘響後”。也就是說鬧鐘響後他們要發生相關的動作。
那麼冒泡怎麼解釋呢:冒泡就好比是家裏有一個聲音非常大的鬧鐘放在兒子的房間，只要響了後爺爺、爸爸、兒子都去幹自己對應的事情。這顯然是不合理的，如果爺爺想要晚起呢？是不行的。
如何處理？處理的方法是在兒子，爺爺，爸爸的房間各裝一個鬧鐘，自己設定響鈴時間。在支付寶小程序中其實就是把onTap之類的事件換成catchTap。也可以理解爲，當前組件捕獲了tap時間不用向上傳遞了。

但是有一個問題如果兒子事件是onTap但是爸爸是catchTap那麼當tap事件發生在兒子上時其實爸爸的tap事件也被觸發了但是爸爸是catch的方式所以爺爺的tap時間不會被觸發。

事件對象

defaultTap(event) {

對於每個事件有一個默認的事件對象。也就是event那麼事件對象對我們有什麼用呢？當然事件對象包含了豐富的信息。包括了tap時間發生的位置，發生在哪個元素上，發生的組件的id等。當然touch事件和tap事件的event數據略有差異，這個不用細說，大家最好的辦法是用

console.log(event)

打印然後獲得自己想要的數據。
對象結構爲：

Object {type: "touchStart", timeStamp: 1535471473292, target: Object, currentTarget: Object, touches: Array(1)…}

給事件處理器傳值

我們知道在原生js中我們可以這樣傳值

handle(name) {
    console.log(name)
}

但是在支付寶小程序中我們不能這樣寫。而是要給組件設置data-*屬性。例如:

<button data-site="https://blog.csdn.net/marswill" data-user-name="Mr.Wei" type="primary" size="mini" onTap="defaultTap">點擊我</button>

那麼在這兒data-site和data-user-name就是我們附加的數據，怎麼樣獲取呢？

handle(event) {
    console.log(event.target.dataset.site);
    console.log(event.target.dataset.userName); //注意中劃線要處理成小駝峯法
}

事件這部分比較簡單，如果有更多疑惑請查看我的視頻教程https://edu.csdn.net/course/detail/5750或者給我發郵件交流。