界面与逻辑层交互，第一：从逻辑层往界面层暴露数据；第二：界面层需要有一些行为用逻辑层处理，就用到事件机制。
事件机制，在html中的事件机制是一样的，只是在小程序中有一些微小的变化。
小程序事件处理，通过标签的属性，指定事件处理的函数。
bindtap="xx"
eg:<button bindtap="tapHandle">click me</button>，然后在逻辑层就可以去处理 tapHandle 这个事件。
Page({
// 页面逻辑层，可以定义data
// on xxx 生命周期函数
// 定义用于界面层的事件处理函数
tapHandle(e){
// e 是事件参数 事件参数、谁被点击都可以打印出
console.log(e)
}
})解决冒泡：
类似有两个绑定事件，且是子父级关系的，都会有冒泡。
解决办法就是，给子元素的属性改为catchtap=""
<view viewbindtap="viewbindtap">
<button catchtap="tapHandle">click me</button>
<!-- 类似有两个绑定事件，且是子父级关系的，都会有冒泡 -->
<!-- 解决办法就是，给子元素的属性改为catchtap="" -->
</view>多条数据，如何获取到，点击的是哪一条？
可以通过data-xx 属性 给事件处理函数传递额外的参数。
<!-- 可以通过data-xx 属性 给事件处理函数传递额外的参数 -->
<!-- 有好多条数据，希望点击时，能够获取到点击的是哪一个？ -->
<!-- 给按钮添加属性形式，data-id="1" -->
<view>
<text>item</text>
<button bindtap="removeHandle" data-id="1">remove</button>
</view>
<view>
<text>item</text>
<button bindtap="removeHandle" data-id="2">remove</button>
</view>
<view>
<text>item</text>
<button bindtap="removeHandle" data-id="3">remove</button>
</view>
<view>
<text>item</text>
<button bindtap="removeHandle" data-id="4">remove</button>
</view>
<view>
<text>item</text>
<button bindtap="removeHandle" data-id="5">remove</button>
</view>逻辑层：
当点击条目时，会打印出当前的e。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
分界线
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
举个大栗子
小程序事件处理
业务：点击左边的tab时，tab高亮。
wxml：
<view class="couSelectNav">
<view>
<text class="{{_num==1 ?'active':''}}" bindtap="couSelNavHandle" data-num="1">银行从业</text>
<text class="{{_num==2 ?'active':''}}" bindtap="couSelNavHandle" data-num="2">会计职称</text>
<text class="{{_num==3 ?'active':''}}" bindtap="couSelNavHandle" data-num="3">基金从业</text>
<text class="{{_num==4 ?'active':''}}" bindtap="couSelNavHandle" data-num="4">证券从业</text>
<text class="{{_num==5 ?'active':''}}" bindtap="couSelNavHandle" data-num="5">期货从业</text>
<text class="{{_num==6 ?'active':''}}" bindtap="couSelNavHandle" data-num="6">经济师</text>
</view>
</view>wxss:
.couSelect {
width: 100%;
height: 100%;
margin-top: 10rpx;
overflow: hidden;
}
.couSelectNav {
float: left;
width: 170rpx;
height: 100%;
background: #f2f4f7;
padding-top: 32rpx;
padding-bottom: 30rpx;
}
.couSelectNav text {
display: block;
width: 100%;
height: 104rpx;
line-height: 104rpx;
text-align: center;
font-size: 28rpx;
border-left: 10rpx solid transparent;
}
.couSelectNav text.active {
color: #000;
border-color: #f85a40;
background: #fff;
}逻辑层：
Page({
/**
* 页面的初始数据
*/
data: {
_num:1,//一定要在这里定义_num
},
couSelNavHandle(e) {
this.setData({
_num: e.target.dataset.num,//点击时，改变_num的值
})
})