微信小程序事件绑定

事件绑定

什么是事件

事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 id, dataset, touches。

事件的使用方式

在视图层wxml中绑定一个事件处理函数。

<view id="tapTest" data-hi="Weixin" bindtap="tapName">点击我 </view>

在相应的Page定义中写上相应的事件处理函数，参数是event。

Page({
  tapName: function(event) {
    console.log(event)
  }
})

⼩程序中绑定事件，通过bind关键字来实现。如 bindtap bindinput bindchange 等
不同的组件⽀持不同的事件，具体看组件的说明即可

功能:

1. 双向绑定: 在输入框中写入文字,将文字实时映射到其他地方,输入框中文字改变,映射也要实时改变
2. 按钮事件: 通过按钮 来操作输入框的值
   示例:
   js

// pages/demo01/demo01.js
Page({
  data: {
    num:0
  },
  //输入框的input事件的执行逻辑
  handInput(e){
    //e.detail.value用来获取输入框的值
    console.log(e.detail.value);
    //通过setData方法设置 data里面的数值
    this.setData({
      num:e.detail.value
    })
  },
  //按钮点击事件
  handleClick(e){
    // 获取自定义属性
    const operat = e.currentTarget.dataset.operat;
    console.log(operat)
    this.setData({
      // 这里有一个问题,一开始num默认是0,是一个数值型数据,加减按钮可以进行数字的加减,
      // 但是当输入框有数据,并且同步到输出的时候,num就不是数值类型了,
      // 在通过e.detail.value方法获取输入框数据的时候,获取到的是字符串类型,这个时候再点击加减按钮进行的就是字符串的相加
      num:this.data.num + operat
    })
})

wxml

<!--事件绑定-->
<!-- 
  功能:数据改变双向绑定
  步骤
1. 给input标签绑定 input事件
   绑定的关键字是: bindinput
2. 通过事件原对象获取输入框的值, e.detail.value来获取输入框的值
3. 把输入框的值,赋值到data中
   不能直接 this.data.num = e.detail.value
   也不能 this.num = e.detail.value(vue写法)
   正确写法:
   this.setData({
     num:e.detail.value
   })
-->

<!-- bindinput表示输入框值改变事件 -->
<input type="text" bindinput="handInput"/>
<view>
  {{num}} 
</view>

<!-- 按钮的 点击事件
1. 使用bindtap关键字
2. 不能像Java那样直接在事件括号中直接传参:bindtap="handleClick(1)" ,
   小程序会把括号也当做事件名称
3. 通过自定义属性的方法来传递参数
4. 在事件源中获取自定义属性
-->
<button bindtap="handleClick" data-operat="{{1}}">+</button>
<button bindtap="handleClick" data-operat="{{-1}}">-</button>

注意点:

获取输入框的值

//1. 在js中的Page方法中写函数:
//2. 其中的参数e表示事件源对象
  handInput(e){
  console.log(e.detail.value);
  }

在后台改变data属性中的数据

1. 在事件函数中通过this指针. setData方法来设置
    this.setData({
      num:e.detail.value
    })

事件传递参数 (将wxml页面 的数据传递到js页面)

在事件中传递参数

1. 不能像Java那样直接在事件括号中直接传参
   小程序会把括号也当做事件名称

   <input type="text" bindinput="handInput(100)"/>
   

 
2. 通过自定义属性的方法来传递参数, 自定义属性使用: **data-属性名**格式
3. 在事件源中获取自定义属性

**wxml页面中**
上面是正确的, operat就是属性名
~~~xml
<button bindtap="handleClick" data-operat="{{1}}">+</button>

下面是错误的,data没写对,所以operat就不显示了

<button bindtap="handleClick" dat-operat="{{-1}}">-</button>

看下图控制台输出的事件源对象:

js中
e是事件源对象,看上图红色框,
currentTarget是e下面的属性
dataset是currentTarget下面的属性
operat是dataset下面的属性, (operat不是固定的,可以在wxml中的data-名称来设置)

  handleClick(e){
    console.log(e);
    // 获取自定义属性
    const operat = e.currentTarget.dataset.operat;
}

在参数传递的时候,基本都是通过 e 事件源对象中的属性来设置