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

事件使用範例

頁面程式碼：

<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事件

常用的事件

事件冒泡

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

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

那這三代都有一個時間就是“鬧鐘響後”。也就是說鬧鐘響後他們要發生相關的動作。
那麼冒泡怎麼解釋呢:冒泡就好比是家裡有一個聲音非常大的鬧鐘放在兒子的房間，只要響了後爺爺、爸爸、兒子都去幹自己對應的事情。這顯然是不合理的，如果爺爺想要晚起呢？是不行的。
如何處理？處理的方法是在兒子，爺爺，爸爸的房間各裝一個鬧鐘，自己設定響鈴時間。在支付寶小程式中其實就是把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); //注意中劃線要處理成小駝峰法
}