【自学微信小程序第三天】WXML模板语法之事件绑定（上）——常用事件，事件对象的属性表以及bindtap的语法格式

WXML模板语法之事件绑定

什么是事件

事件是渲染层到逻辑层的通讯方式
逻辑层：.js文件
渲染层：网页

常用事件

类型	绑定方式	事件描述
tap	bindtap或bind:tap	手指触摸后马上离开，类似于HTML中的click事件
input	bindinput或bind:input	文本框的输入事件
change	bindchange或bind:change	状态改变时触发

事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象event（形参对象），它的详细属性如下表：
使用时：event.+属性名

属性	类型	说明
type	String	事件类型
timeStamp	Integer	页面打开到触发事件所经过的毫秒数
target	Object（对象）	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合
detail	Object	额外的信息
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组（有几个手指在屏幕上）
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

target和currentTarget的区别

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

我们放了一个view组件和一个button按钮组件（嵌套）并用bindtap形式为外层的view绑定一个手指的触摸处理函数
点击内部的按钮时，点击事件以冒泡的形式向外扩散，也会触发外层view的tap事件处理函数
此时，对于外层的view来说：

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

bindtap的语法格式

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

• 通过bindtap，可以为组件绑定tap触摸事件，语法如下：

<button type="primary" bindtap="btnTapHandler">按钮</button>

• 在页面的.js文件中定义对应事件处理函数，事件参数通过形参event（一般简写成e）来接收
  这是定义按钮事件处理函数（与date平级）

btnTaphandler(e){//按钮的tap事件处理函数
    console.log(e)//事件参数对象e（打印）
  }

那么怎么打印呢？我们打开调试器，点开console面板，先清空，然后点击按钮，就会有一个参数对象，就对应的e