三、微信小程序-快速回顾 ( 视图层的交互事件、页面间传值、访问表单值)

一、视图层的交互事件

想让视图层的元素具有和用户交互的功能，我们就需要让事件、元素、处理函数三者进行绑定，微信小程序中的事
件也有冒泡的机制，微信小程序的事件其实和 html 中的差不多，所以也不用多说什么理论，直接回顾三者如何绑定

本文只用一些最常见的事件来举例，想了解更多事件请参考 微信小程序事件，除了 微信小程序事件 中罗列的元素
通用事件，一些表单标签还会有一些自己特定的事件，所以在使用各个标签的时候，要提前仔细阅读 微信小程序标签

1.1. 元素绑定事件

所谓的元素绑定事件，无非就是为元素添加一个事件发生时的处理函数，所以元素绑定事件需要下面两步：

1. 在页面逻辑文件（.js 文件 ）中自定义事件的处理函数
2. 在页面布局文件（ .wxml 文件）中为想交互的元素添加事件监听属性，并指明定义好的的事件处理函数名
   元素添加事件监听属性的方式：绑定事件的关键字:事件名="事件处理函数名"，绑定事件的关键字常用的有两个
   第一个关键字是 bind，第二个关键字是 catch，两个关键字的区别是，前者会将事件冒泡，而后者不会
   
   

用示例演示点击事件

1. 在页面逻辑文件中定义事件处理函数：

Page({
  // 自定义父容器点击事件的处理函数
  handleParentTap(){
    console.log("父容器的点击事件被触发！")
  },
  // 自定义子容器点击事件的处理函数
  handleChildTap(){
    console.log("子容器的点击事件被触发！")
  }
});

2. 在页面布局文件中为元素绑定事件：

<text>使用 bind 关键字绑定事件，会冒泡：</text>
<view bind:tap="handleParentTap">
  <view bind:tap="handleChildTap"></view>
</view>

<text>使用 catch 关键字绑定事件，不会冒泡：</text>
<view catch:tap="handleParentTap">
  <view catch:tap="handleChildTap"></view>
</view>

3. 在页面样式文件中为元素添加个边框，方便观察：

view{
  height:300rpx;
  width:300rpx;
  border:1px solid black;
  margin:10rpx;
}
view > view{
  height:100rpx;
  width:100rpx;
  border:1px solid black;
}

4. 运行效果：

观察右下角控制台的输出可以看到页面元素成功的为点击事件绑定了处理函数，使用 bind 关键字绑定的盒子会将
事件冒泡给父盒子，而 catch 关键字绑定的则不会

1.2. 元素向事件函数传值

微信小程序 和 传统 web 的事件传参方式不同，传统 web 中传参流程是：

1. 定义事件处理函数时，在函数签名中指定形参
2. 在标签绑定处理函数时，在函数签名处传入实参

微信小程序不能使用这套流程，因为微信小程序中定义的事件处理函数不能有自定义形参，但是会有一个默认的
类似于事件对象的参数，我们可以利用这个事件对象来实现传值操作，具体流程是：

1. 在标签中对事件对象设置自定义属性 data-自定义属性名=“属性值”
2. 在事件处理函数的事件对象中获取自定义属性值 事件对象.currentTarget.dataset.自定义属性名

用示例演示点击事件时的传值

1. 在页面逻辑文件中定义事件处理函数（使用默认参数）：

Page({
  // 通过默认的参数（事件对象）来实现元素和事件处理函数间的传值问题
  handleTap(e){
    // 通过元素中绑定的自定义属性名获取元素的传值
    console.log(e.currentTarget.dataset.param)
  }
});

2. 在页面布局文件中为元素绑定事件、为事件处理函数的默认参数（事件对象）设置自定义属性值：

<view bind:tap="handleTap" data-param="这是传的参数" 
	style="border:1px solid black; height:200px; width:200px"></view>

3. 运行效果，观察控制台，点击盒子后，成功将值传递到了事件处理函数中：

二、获取表单元素的值

2.1. 利用事件

给表单绑定事件处理函数，然后通过事件处理函数的默认参数（事件对象）来实现获取表单值的效果

2.1.1. 获取触发事件的表单元素的值

我们经常需要在函数中获取表单标签的值，在微信小程序中，想实现这个效果，可以利用事件处理函数的默认参
数（事件对象）来实现，语法为：事件对象.detail.value

示例：为表单绑定事件和事件处理函数，通过事件对象获取表单的值

1. 在页面逻辑文件中定义事件处理函数，在函数内使用事件对象获取触发事件的表单元素的值：

Page({
  // 绑定输入框元素的焦点离开事件
  handleBlur(e) {
    // 获取输入框表单元素的值
    console.log(e.detail.value)
  }
});

2. 在页面布局文件中为表单元素绑定事件：

<input type="text" 	bind:blur="handleBlur" value="文本框中的默认值" style="border:1px solid black;"/>

3. 运行效果，通过右下角控制台可以看到函数内已经成功获取表单元素的值：

2.1.2. 利用表单提交获取多个表单元素的值

如果想一次性获取多个表单元素的值，我们需要借助 <form> 标签和 <button> 标签，常见场景就是表单提交时的
验证，具体步骤如下：

1. 在布局文件中将所有要获取元素值的表单标签都定义在 <form> 标签内，并设置每个标签的 name 属性
2. 给 <form> 标签绑定提交事件 bind:submit
3. 在 <form> 标签内定义一个 form-type 属性为 submit 的 <button> 标签，该按钮用来触发表单提交事件
4. 在逻辑文件中，定义表单提交事件处理函数，在函数内通过 事件对象.detail.value 可以得到一个对象，该对象的属性为
   我们定义在 <form> 下的各个表单标签的 name 值，对象属性对应的值为其属性名对应的表单元素的值

示例：利用表单提交获取多个表单元素的值

1. 在布局文件中将表单标签定义在 <form> 标签内，并对各个表单标签设置 name 属性：

<form bind:submit="handleSubmit">
<input name="name" type="text" value="姓名" style="border:1px solid black;"/>
<input name="age" type="text" value="年龄" style="border:1px solid black;"/>
<button form-type="submit">提交</button>
</form>

2. 在逻辑文件中通过 事件对象.detail.value.表单标签 name 属性值 来获取各个表单元素的值

Page({
  // 绑定输入框的焦点离开事件
  handleSubmit(e) {
    // 获取 name = "name" 的表单元素的值
    console.log(e.detail.value.name)
    // 获取 name = "age" 的表单元素的值
    console.log(e.detail.value.age)
  }
});

3. 运行效果，通过右下角控制台可以看到函数内已经成功获取表单元素的值：

2.2. 利用双向绑定功能

微信小程序中也有和 Vue 中相同的双向绑定功能，既表单元素和页面数据进行绑定，任何一方发生变化都会同步
到另一方，微信小程序中的双向绑定功能只需要在要绑定的标签内添加 model:待绑定的属性名 即可，通过双向绑定
来获取表单值得的方式也是我个人比较推荐的，感觉更符合现在流行的前端开发框架中不直接操作 DOM 的理念

示例：双向绑定

1. 在逻辑文件中定义页面数据

Page({
  // 页面数据
  data:{
    name:'默认值'
  }
});

2. 在布局文件中的标签中使用 model:待绑定的属性名 与页面数据进行双向绑定

<input name="name" type="text" model:value="{{name}}" style="border:1px solid black;"/>

3. 运行效果，通过观察右下角 AppData 窗口，可以看到输入框的内容变化后，页面数据也随着变化