小程序事件练习

事件绑定
tap事件：类似click事件

input事件：文本框的输入事件

change事件：状态改变触发
 

事件类型...

按钮绑定事件
 

<button type="primary"  bind:tap="btnTapHandler">按钮</button>

  //定义按钮事件函数
  btnTapHandler(e){
      console.log(e)
  },

成功在页面上打印出e

在事件处理函数中为data赋值

定义+1按钮

<button type="primary"  bind:tap="CountChange">+1</button>

定义处理函数
 

  data: {
    count:0
  },


 //+1按钮的点击事件函数
  CountChange(){
    this.setData({
      count:this.data.count+1
    })
  },

成功使得count值按+1就+1
 

事件传参

定义一个传参按钮

<button type="primary" bind:tap="btnTap2" data-info="{{2}}">+2</button>

注意传参要用{{参数}}的形式传，其他形式会被当成文本

  //+2按钮的点击事件函数
  btnTap2(e){
    this.setData({
      count:this.data.count+e.target.dataset.info
    })
  },

e.target.dataset.info获取传入参数

input事件

<input bindinput="inputHeadler"></input>

  //input输入框的事件处理函数
  inputHeadler(e){
    console.log(e.detail.value)
  },

获取文本框输入值

定义文本框

<input value="{{msg}}" bindinput="inputHeadler"></input>

添加样式（wxss文件）

input{
  border: 1px solid #eee;
  margin: 5px;
  padding: 5px;
  border-radius: 3px;
}

//input输入框的事件处理函数
  inputHeadler(e){
    // console.log(e.detail.value)
    this.setData({
      msg:e.detail.value
    })
  },

成功获取