微信小程序开发(6)---事件篇

微信小程序开发(6)—事件篇

事件是什么

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理

小程序中常用事件

bindtap (bind:tap)、bindinput (bind:input)、bindchange (bind:chage)
catchtap …

事件的语法格式

在小程序中，不存在 HTML 中的 onclick 鼠标点击事件，而是通过 tap 事件来响应用户的触摸行为…

1. 通过 bind事件名，可以为组件绑定事件
2. 在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event(一般简写为 e) 来接收
   例:

<button bindtap="handleTap">点击</button>

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  // 按钮 tap 事件处理函数
  handleTap(e){
  	console.log(e) //事件对象
  }
})

事件对象的属性列表

属性	类型	说明
type	String	事件类型
timeStamp	Integer	事件生成时的时间戳
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合
detail	Object	额外的信息
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

target 和 currentTarget 的区别✨✨

1. target是触发该事件的源头组件
2. currentTarget则是当前事件所绑定的组件

点击内部的按钮时，点击事件以 冒泡 的方式向外扩散，也会触发外层 view 的 tap 事件处理程序
此时，对于外层的 view 来说：

1. . e.target 指定的是触发事件的源头组件，因为 e.target 是内部的按钮组件
2. e.currentTarget 指向的是当前正在触发事件的那个组件，因e.currentTarget 是当前的 view 组件

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

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

1. 更新数据
2. 驱动视图更新

Page({
  data: {
    count : 0
  },
  addcount(){
    this.setData({
      count : this.data.count + 1
    })
  }
})

事件传参 ✨✨

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理程序传递参数

事件传参错误方式

下面的代码将不能正常工作.因为小程序会把bindtap的属性值，统一当作事件名称来处理，相当于要调用一个名称为btnHandler(123)的事件处理函数

<button bindtap="btnHandler(123)">点击</button>

事件传参正确方式

可以为组件提供data-*自定义属性传参，其中*代表的是参数的名字，实例代码如下：

1. info会被解析为 参数的名字
2. 数值 2 会被解析为 参数的值

<button bindtap="btnHandler" data-info="{{2}}">点击</button>

3. 接收事件传递的参数
   -. 在事件处理函数中，通过event.target.dataset.参数名 即可获取到具体参数的值，示例代码如下：

btnHandler(event){
	//dataset 是一个对昂 包含了所有通过data-* 传递过来的参数项
	//通过dataset 可以访问到具体参数的值
	console.log( event.target.dataset.info)
}

注

在小程序中，通过 input 事件来响应文本框的输入事件，语法格式如下：

1. 通过 bindinput，可以为为文本框绑定输入事件

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

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

// 获取 input 中的最新输入的数据
inputHandle (e) {
  // e.detail.value 是输入框最新输入的值
  console.log(e.detail.value)
}