零基础学习微信小程序（5）：小程序事件的绑定

小程序绑定事件通过bind关键字来实现，如：bindtap、bindinput、bindchange等
bindinput
bindinput事件，输入文本内容，就会出现相应的事件例如：

<!--pages/demo04/demo04.wxml-->
<input type="text" bindinput="handleInput"></input>
<view>{{num}}</view>

// pages/demo04/demo04.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    num:0
  },
  //输入框的input事件的执行逻辑
  handleInput(e){
    console.log(e);
  }
})

注意事项，在小程序的赋值操作比较特殊，不可以直接使用：
this.data.num=e.detail.value或者是
this.num=e.detail=e.detail.value
(e.detail.value的值可以在控制台找到)
正确写法：

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

所以代码为：

// pages/demo04/demo04.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    num:0
  },
  //输入框的input事件的执行逻辑
  handleInput(e){
    console.log(e.detail.value);
    this.setData({
      num:e.detail.value
    })
  }
})

在上面的input行输入时，下方的也会进行实时的修改。

bindtap：绑定点击事件
无法在小程序的事件中直接传递参数，需要通过自定义属性的方式来传递参数

<!--pages/demo04/demo04.wxml-->
<input type="text" bindinput="handleInput"></input>
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>{{num}}</view>

// pages/demo04/demo04.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    num:0
  },
  //输入框的input事件的执行逻辑
  handleInput(e){
    console.log(e.detail.value);
    this.setData({
      num:e.detail.value
    })
  },
  //加减按钮的事件：
  handletap(e){
    console.log(e);
    const operation=e.currentTarget.dataset.operation;
    this.setData({
      num:this.data.num+operation
    })
  }
})

文章内容为视频零基础玩转微信小程序【黑马程序员】知识点整合