微信小程序：6.事件

什么事事件

事件就是渲染层到逻辑层的通讯方式，比如提交表单，按钮点击都可以看作一个事件。

小程序中常用的事件

事件对象属性列表

当事件回调时，会收到一个事件对象event，他详细属性如夏表所示：

target和currentTarget的区别

target是触发该事件的源头组件，而currentTarget则是当前时间所绑定的事件：

bindtap的语法格式

在小程序中不会通过onclick进行鼠标点击时间，而是通过tap事件响应用户的触摸事件

//在js中定义
outerHandle(e){
    console.log(e)
  }
1
2
3
4

<view class="outview">
  <button type="primary" bind:tap="outerHandle">按钮</button>
</view>
1
2
3

在事件处理函数中data汇总的数据赋值

通过调用this.setData(dataObject)方法，可以给页面中的data中的数据重新赋值

点击按钮number进行增加

<view class="outview">
  <text>{{number}}</text>
  <button type="primary" bind:tap="outerHandle">按钮</button>
</view>
1
2
3
4

事件传参

小程序中的事件穿参比较特殊，不能在绑定事件的同时进行传递参数
小程序中可以为组件童工data-自定义属性穿参，其中代表的是参数的名字，示例代码如下：

<button bind:tap="btnhandle" data-info="{{2}}">事件穿参数</button>
1

最终info会被解析为参数的名字
数字2会被解析为参数的值
在事件处理函数中可以使用event.target.dataset.参数名，可以拿到具体参数值

btnhandle(event){
    console.log(event.target.dataset)

    console.log(event.target.dataset.info)
  }
1
2
3
4
5

bindinput事件

在小程序中通过input来响应文本框输入事件
1.通过bindinput，可以为文本框绑定输入事件

<input type="text" bindinput="inputHandle"/>

1
2

2.在页面的.js文件中定义事件的处理函数：

 inputHandle(e){
      console.log(e.detail.value)
  }
1
2
3

实现文本框和Data之间的数据同步

实现步骤

1. 定义数据
2. 渲染结构
3. 美化样式
4. 绑定input事件处理函数

Page({

  /**
   * 页面的初始数据
   */
  data: {
      msg:"你好",
  },
1
2
3
4
5
6
7
8

2.在wxml中定义input绑定msg并且定义事件

 inputHandle(e){
    // console.log(e.detail.value);
    this.setData({
      msg:e.detail.value
    })
  },
1
2
3
4
5
6