微信小程序事件应用详解

一、微信小程序——事件

1、冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

bindtap事件（ 当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数）

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

WXML事件

QQ截图20180629173824.png

事件绑定
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)
  },

当输入完成后按回车或手机键盘确认键会触发