事件

事件 Events

• 事件是视图层 | wxml 到逻辑层 | js 的通讯方式：将用户的行为反馈到逻辑层进行处理
• 事件绑定在组件上；当达到触发事件，就会执行逻辑层中对应的事件处理函数
• 默认情况下，事件是冒泡机制
• 绑定事件使用 bind: 语法
• 使用 catch: 语法可以阻止事件冒泡
• 更多信息，请访问 Vue-events、html-event

事件处理函数 EventHandle

• 在结构中为节点元素绑定事件并指定事件处理函数

<view class="title" bind:tap="test">best wishes</view>

• 在页面逻辑顶层 | data 同级，声明事件处理函数；e 是事件对象

test: function(e){
  console.log(e);
}

• 可以不使用关键字 function

test(e){
  console.log(e);
}

• 使用更为简洁的箭头函数；HTML中，this 指向 window；小程序宿主环境是微信，不是浏览器，所以 this 为 undefined

test: (e)=>{
  console.log(e);
}

事件类型 Type

• 常见事件有：单击事件 tap 和触摸事件 touch
• 此外，每个组件还有自己的独有的事件，如表单的提交事件 submit 和重置事件 reset、滑动组件的 scroll 等等，详情请查阅官方文档

事件对象 Event

• 事件发生时，会触发一个事件对象 event；通常简写为 e
• 包含事件发生时的很多额外信息，常见的有：
• type：事件类型
• dataset：自定义数据
• detail：具体信息，如表单元素的值
• target：事件对象目标；绑定事件的组件
• currentTarget：事件流当前阶段的目标，响应事件的元素
• touches：一个数组，每个元素为一个 Touch 对象，表示当前停留在屏幕上的触摸点

事件传参 Parameter

• 无法像其它环境中直接传递参数，如 eventHandle(parameter)
• 通过 自定义数据 data- 的方式携带参数，保存在事件对象目标 target/currentTarget 的 dataset 属性中

• 结构 - 一个大矩形包含一个小矩形；分别绑定事件、指定事件处理函数并自定义数据；样式略
• 单击大矩形时，target 和 currentTarget 都是自己：自己绑定事件，自己响应事件
• 单击小矩形时，由于冒泡的原因，先是小矩形响应事件，然后冒泡到大矩形再响应事件
• 对小矩形而言，target 和 currentTarget 都是自己：自己绑定事件，自己响应事件
• 对大矩形而言，它响应的是小矩形绑定的事件，所以 target 是小矩形，而 currentTarget 是大矩形

<view class="outer" bind:tap="outerTap" data-ind="outer">
  <view class="inner" bind:tap="innerTap" data-ind="inner"></view>
</view>

• 逻辑 - 分别显示事件对象目标和当前事件对象目标

outerTap(e) {
  console.log('outer');
  console.log('target', e.target.dataset);
  console.log('currentTarget', e.currentTarget.dataset);
},

innerTap(e) {
  console.log('inner');
  console.log('target', e.target.dataset);
  console.log('currentTarget', e.currentTarget.dataset);
}

• 根据自定义数据，决定业务方向
• 结构

<button bind:tap="confirmProduct" data-flag="0">加入购物车</button>
<button bind:tap="confirmProduct" data-flag="1">立即购买</button>

• 逻辑

confirmProduct(e) {
    if (e.currentTarget.dataset.flag) {
      // to order
      console.log('order');
    } else {
      // add to cart
      console.log('cart');     
    }
  }

• 请分析代码执行情况

思路：使用内联样式绑定数据 color；获取3个随机数并使用模板语法更新颜色

<view style="background-color: {{color}};" bind:tap="randColor">random color</view>

data: {
  color: '#f40'
},
randColor(){
  let rand0=parseInt(Math.random()*255)
  let rand1=parseInt(Math.random()*255)
  let rand2=parseInt(Math.random()*255)
  this.setData({
    color:`rgb(${rand0},${rand1},${rand2})`
  })
}

• 商品数据 goods：数组，远程读取

data: {
  goods: [],
}

• 每个商品是一个对象，包括如下基本信息

id: 1,
name: '商品名称',
desc: '商品描述',
price: 10,
quantity: 1,
img: 'https://img.alicdn.com/tfs/TB1.XZ.XZJ1B2RjSZFXXX_o8VXa-200-200.png',

• 在页面 onload 中列表渲染 wx:for，并为增加减少绑定事件，同时使用数据 index 作为自定义数据，便于修改其数量

<view wx:for="{{goods}}" wx:key="item">
  <view>{{item.name}}</view>
  <view>{{item.desc}}</view>
  <view>{{item.price}}</view>
  <view>
     <button bind:tap="dec" data-ind="{{index}}">-</button>
     <view>{{item.quantity}}</view>
     <button bind:tap="inc" data-ind="{{index}}">+</button>
  </view> 
</view>

• 数量增加/减少业务逻辑：分别获取所有商品数据和当前商品数据的 index；在边界条件的限制下，增加或减少当前商品数据的数量；最后更新数据

dec(e) {
  const ind = e.currentTarget.dataset.ind
  const carts = this.data.carts
  const item = carts[ind]
  if (item.quantity > 1) {
    item.quantity--
  }
  this.setData({
    carts
  })
},

inc(e) {
  const ind = e.currentTarget.dataset.ind
  const carts = this.data.carts
  const item = carts[ind]
  if (item.quantity ≤ 9) {
    item.quantity++
  }
  this.setData({
    carts
  })
}

• 结构：三级，包括：modal → cont → close
• 需求：单击 modal 或者 单击 cont 中的 close，都可以关闭模态框；单击 cont 不应关闭；通常说，单击关闭或其它地方来关闭模态框
• 为了避免冒泡事件重复执行，为 close 采用阻止事件冒泡的绑定 catch:

• <view class="modal" id="modal" bind:tap="closeModal">
    <view close="“cont">
      <view class="close" id="close" catch:tap="closeModal">x</view>
    </view>
  </view>

• 借助 id 来判断，如果触发事件和响应事件相同，则关闭

closeModal(e) {
  if (e.target.id == e.currentTarget.id) {
    this.setData({
      isShowCart: false
    })
  }
}

• 优化：为了避免单击 cont 时，modal 响应，为 cont 绑定空事件并阻止冒泡

<view close="“cont" catch:tap="preventModalClose">
  // ...
</view>

preventModalClose(e) {}