一 通過實(shí)例來認(rèn)識

(一) 給出代碼

我們直接通過一個(gè)實(shí)例來引入我們想要講解的內(nèi)容：

<input type="text" bindinput="handleInput" />
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>

<view>你輸入的是：{{number}}</view>

上述代碼就四行，首先是一個(gè) input 輸入框，目的是用來輸入一些值，同時(shí)下面標(biāo)簽就會顯示，接著是兩個(gè) button 用來分別執(zhí)行 +1 或者 -1 的操作，最后一個(gè) view 標(biāo)簽就是為了 進(jìn)行數(shù)據(jù)輸入或變化的回顯

Page({
  data: {
    number:0
  },
  handleInput(e){
    this.setData({
      number:e.detail.value
    })
  },
  handletap(e){
    const operation = e.currentTarget.dataset.operation
    this.setData({
      number:this.data.number + operation
      // number:this.data.number * 1 + e.currentTarget.dataset.operation
    })
  }
})

這里給出的就是對應(yīng)的 js 代碼，涉及到了對于輸入以及 +1 或者 -1 操作的一個(gè)具體邏輯處理，核心就是圍繞 data 中定義的 number 變量進(jìn)行處理（具體邏輯接著會提到），結(jié)合前面的 wxml 代碼分析一下：

(二) 分析代碼

分析標(biāo)簽中屬性中的部分：

bindinput="handleInput"

bindtap="handletap" data-operation="{{-1}}"

• 綁定事件的關(guān)鍵字是 bind 例如上面用到的 bindinput 和 bindtap 就是分別對于輸入和點(diǎn)擊事件的一個(gè)綁定
• 而后面的一個(gè)名稱例如 handleInput 就是自定義的事件名稱，我們在 js 中書寫方法也是與這個(gè)后面的名稱相對應(yīng)
• 注：綁定關(guān)鍵字為 bind 僅針對此例，并非只是 bind

補(bǔ)充幾個(gè) input 中相對常用的事件綁定屬性

屬性	類型	必填	說明	最低版本
bindinput	eventhandle	是	鍵盤輸入時(shí)觸發(fā)，event.detail = {value, cursor, keyCode}，keyCode 為鍵值，2.1.0 起支持，處理函數(shù)可以直接 return 一個(gè)字符串，將替換輸入框的內(nèi)容。	1.0.0
bindfocus	eventhandle	是	輸入框聚焦時(shí)觸發(fā)，event.detail = { value, height }，height 為鍵盤高度，在基礎(chǔ)庫 1.9.90 起支持	1.0.0
bindblur	eventhandle	是	輸入框失去焦點(diǎn)時(shí)觸發(fā)，event.detail = {value: value}

如果想要獲取到輸入框的值，通過時(shí)間源對象來獲取 e.detail.value

(1) JS 中賦值問題

輸入框中輸入的值賦值給 data 中的 number，如果按慣性思維直接賦值是有問題的

• 不能使用 this.data.numer = e.detail.value

• 不能使用 this.number = e.detail.value

• 需要使用：

this.setData({
	number:e.detail.value
})

(2) JS 中按鈕傳參問題

添加按鈕點(diǎn)擊事件：關(guān)鍵字是 bindtap

我們按鈕想要達(dá)到的目的是，點(diǎn)擊按鈕進(jìn)行 number 的 +1 或者 -1 ，通過根據(jù)我們上面的 js 代碼可以看出，這里所采用實(shí)現(xiàn)的方式是根據(jù)頁面屬性中傳來的參數(shù)，進(jìn)行相加，例如 number + 1 或者 number + (-1) 達(dá)到加減效果

但是，直接傳參是有問題的?。?！只能通過屬性賦值

正解： bindtap="handletap" data-operation="{{-1}}"

(3) 忘記想要的值對應(yīng)在哪里

說明：如果記不住例如：e.detail.value、e.currentTarget.dataset.operation 則可以使用如下的方式，先把事件打印出來

handleInput(e){
    console.log(e);
},

在找到對應(yīng)的層級

二 事件綁定類別

(一) 分類

我們上面的例子使用了 bind 這個(gè)事件綁定關(guān)鍵字，但是它會發(fā)生冒泡事件

• 冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件會向父節(jié)點(diǎn)傳遞

• 非冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件不會向父節(jié)點(diǎn)傳遞

我們還有一些別的選擇，我們下面在 (3) (4) 中會一個(gè)一個(gè)進(jìn)行分析

• bind ：普通綁定（會發(fā)生冒泡事件）
• catch ：可以阻止事件冒泡
• capture-bind ： 捕獲階段綁定（后面的捕獲流程和冒泡流程還會繼續(xù)執(zhí)行）
• capture-catch ：中斷捕獲階段和取消冒泡階段，在捕獲階段阻止事件的傳遞

(二) 冒泡事件列表

在分析前，我們還要補(bǔ)充一個(gè)點(diǎn)，那就是 WXML 的冒泡事件列表：

我們起碼現(xiàn)在知道了 bind 和 catch 的作用，但是正例如我們上面用到的 bindinput 或者 bindtap ，bind 后面的內(nèi)容又是什么呢？是固定的還是自定義的呢？這一段我直接貼一段官網(wǎng)的文檔說明

類型	觸發(fā)條件	最低版本
touchstart	手指觸摸動(dòng)作開始
touchmove	手指觸摸后移動(dòng)
touchcancel	手指觸摸動(dòng)作被打斷，如來電提醒，彈窗
touchend	手指觸摸動(dòng)作結(jié)束
tap	手指觸摸后馬上離開
longpress	手指觸摸后，超過350ms再離開，如果指定了事件回調(diào)函數(shù)并觸發(fā)了這個(gè)事件，tap事件將不被觸發(fā)	1.5.0
longtap	手指觸摸后，超過350ms再離開（推薦使用longpress事件代替）
transitionend	會在 WXSS transition 或 wx.createAnimation 動(dòng)畫結(jié)束后觸發(fā)
animationstart	會在一個(gè) WXSS animation 動(dòng)畫開始時(shí)觸發(fā)
animationiteration	會在一個(gè) WXSS animation 一次迭代結(jié)束時(shí)觸發(fā)
animationend	會在一個(gè) WXSS animation 動(dòng)畫完成時(shí)觸發(fā)
touchforcechange	在支持 3D Touch 的 iPhone 設(shè)備，重按時(shí)會觸發(fā)	1.9.90

注：除上表之外的其他組件自定義事件如無特殊聲明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件，(詳見各個(gè)組件)

看完上面的表格，應(yīng)該就比較清楚了，正因?yàn)槲覀兒芏嗍录际峭ㄟ^手機(jī)點(diǎn)一下某個(gè)組件等進(jìn)行，所以 tap 是比較常用的

(三) bind 和 catch

說明：代碼在下面自取

(1) bind

前面我們提到了，使用 bind 會發(fā)生冒泡事件，我們來模擬一下

首先我們寫了三個(gè)嵌套的 view 標(biāo)簽，然后接著使用 bindtap 進(jìn)行事件綁定，進(jìn)行一個(gè)基本的打印邏輯，看看會有什么情況發(fā)生

當(dāng)點(diǎn)擊中間層后，首先執(zhí)行了中間層的事件效果，但是最外層的事件效果也被執(zhí)行了，這也就是冒泡事件發(fā)生了

冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件會向父節(jié)點(diǎn)傳遞

非冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件不會向父節(jié)點(diǎn)傳遞

(3) catch

這一次我們?nèi)匀稽c(diǎn)擊中間這一層，如果在上面的基礎(chǔ)上，我們將中間層的事件綁定使用 catch，而不是 bind ，結(jié)果會是怎樣呢？

結(jié)果就是冒泡事件被阻止了，點(diǎn)擊后只顯示中間層的事件

(四) capture-bind 和 capture-catch

前面提及到這兩個(gè)內(nèi)容的時(shí)候，我們提到了一個(gè)概念也就是事件的捕獲階段，簡單說一下：

自基礎(chǔ)庫版本 1.5.0 起，觸摸類事件支持捕獲階段。捕獲階段位于冒泡階段之前，且在捕獲階段中，事件到達(dá)節(jié)點(diǎn)的順序與冒泡階段恰好相反。需要在捕獲階段監(jiān)聽事件時(shí)，可以采用capture-bind、capture-catch關(guān)鍵字，后者將中斷捕獲階段和取消冒泡階段。

(1) capture-bind:tap

依舊是剛才的例子，將三層的屬性都修改為 capture-bind:tap="handleTap1" 這種形式的

當(dāng)我們點(diǎn)擊最里層的內(nèi)容時(shí)，執(zhí)行結(jié)果如下：

即它與包裹它的兩層都執(zhí)行了，且是從外至內(nèi)

(2) capture-catch:tap

將三層屬性修改為 capture-catch:tap="handleTap1" 這種形式，點(diǎn)擊任意一層：

結(jié)果都是只執(zhí)行最外層的

(五) 簡單總結(jié)

• bind ：點(diǎn)擊會觸發(fā)它和包裹它的所有事件，且從內(nèi)向外執(zhí)行（冒泡事件）
• catch ：點(diǎn)擊哪個(gè)就觸發(fā)哪個(gè)，獨(dú)立的（阻止冒泡事件）
• capture-bind ： 點(diǎn)擊會觸發(fā)它和包裹它的所有事件，且從外向內(nèi)執(zhí)行
• capture-catch ：如何點(diǎn)擊都只會觸發(fā)最外層的事件

(六) 代碼提取

代碼給出的是 capture-bind:tap 的情況， bindtap 或者 catchtap 以及 capture-catch 只需要將 capture-bind:tap 替換就行了

wxml

<view class="outer" capture-bind:tap="handleTap1">
  這是最外層
  <view class="middle" capture-bind:tap="handleTap2">
    這是中間層
    <view class="inner" capture-bind:tap="handleTap3">
      這是最里層
    </view>
  </view>
</view>

wxss

.outer {
    text-align: center;
    background-color: red;
    height: 300rpx;
}
.middle {
    background-color: orange;
    width: 60%;
    height: 200rpx;
}
.inner {
    background-color: yellow;
    width: 60%;
    height: 100rpx;
}

結(jié)尾

如果文章中有什么不足，歡迎大家留言交流，感謝朋友們的支持！

如果能幫到你的話，那就來關(guān)注我吧！如果您更喜歡微信文章的閱讀方式，可以關(guān)注我的公眾號

在這里的我們素不相識，卻都在為了自己的夢而努力 ?