微信小程序事件應用詳解

1、微信小程序——事件

一、冒泡事件：當一個組件上的事件被觸發後，該事件會向父節點傳遞。

bindtap事件（ 當用戶點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數）

//wxml文件
 <text class='VerificationCode' bindtap="getVerificationCode">{{time}}</text> 
//js文件
getVerificationCode:function(e){
  console.log(e);
  },

WXML事件

事件綁定
bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定能夠阻止冒泡事件向上冒泡。

2.表單事件

bindblur事件（輸入框失去焦點時觸發）

//wxml文件
 <input type='number' bindblur ="userNameInput" class='phone' name='phone' placeholder='請輸入手機號碼' maxlength='11' placeholder-class='phone_PC'></input>
//js文件
userNameInput:function(e){
  console.log(e.detail.value);//獲取到當前輸入內容
  },

bindinput事件（鍵盤輸入時觸發）
參數value：輸入值；cursor：輸入長度

<input class="weui-input"  bindinput="bindKeyInput" />
//js文件
bindKeyInput: function (e) {
    console.log(e.detail.keyCode)；
    console.log(e.detail.value)；   
  },

bindconfirm事件（點擊完成按鈕時觸發）

<view class="page-section">
    <view class="weui-cells__title">點擊完成按鈕時觸發</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" bindconfirm='bindconfirmInput' confirm-type='send' auto-focus placeholder="點擊完成按鈕時觸發"/>
      </view>
    </view>
  </view>
//js文件
  bindconfirmInput:function(e){
    console.log(e.detail.value)
  },

當輸入完成後按回車或手機鍵盤確認鍵會觸發