微信小程序(八)_事件处理

界面与逻辑层交互，第一：从逻辑层往界面层暴露数据；第二：界面层需要有一些行为用逻辑层处理，就用到事件机制。

事件机制，在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。