微信小程序基础-06-事件处理

一、事件的介绍

• 什么时候会产生事件呢？
• 小程序需要经常和用户进行某种 交互 ，比如点击界面上的某个按钮或者区域，比如滑动了某个区域
• 这些交互都会产生各种各样的 事件
• 事件时如何处理呢？
• 事件是通过 bind/catch 这个属性绑定在组件上的（和普通的属性写法很相似 , 以 key=“value” 形式）；
• key 以 bind 或 catch 开发 , 从 1.5.0 版本开始 , 可以在 bind 和 catch 后加上一个冒号；
• 同时在当前页面的 Page 构造器中定义对应的事件处理函数 tapName, 如果没有对应的函数 , 触发事件时会报错；
• 当用户点击该 button 区域时，达到触发条件生成事件 tap ，该事件处理函数 tapName 会被执行，同时还会收到一个事件对象 event。

二、事件的简单演练

三、常见事件类型

• 某些组件 会有自己特性的 事件类型， 大家可以在使用组件时具体查看对应的文档
• 比如 input 有 bindinput/bindblur/bindfocus 等
• 比如 scroll-view 有 bindscrolltowpper/bindscrolltolower 等
• 这里我们讨论 几个组件都有的 , 并且也 比较常见的事件类型：
  

四、事件类型演练

• 事件类型的演练
  
• 有两个注意点：
• Touchcancle: 在某些特定场景下才会触发（比如来电打断等）
• tap 事件 和 longpress 事件通常只会触发其中一个

五、事件对象介绍

当某个事件触发时 , 会产生一个 事件对象 , 并且这个对象被传入到回调函数中 , 事件对象有哪些常见的属性呢？

六、touches和 changedTouches 的区别

1. 在 touchend 中不同
2. 多手指触摸时不同
   

七、currentTarget和 target 的区别

八、事件参数的传递

• 当视图层发生事件时，某些情况需要事件 携带一些参数到执行的函数 中, 这个时候就可以通过 data-属性 来完成：
• 格式： data-属性 的名称
• 获取： e.currentTarget.dataset. 属性 的名称
  

九、参数传递的练习

十、事件冒泡和事件捕获

当界面产生一个事件时，事件分为了 捕获阶段 和 冒泡阶段 。

十一、代码演练

十二、代码示例

home.wxml：

<!--pages/home/home.wxml-->
<!-- 1.事件处理的回顾 -->
<button bind:tap="handleBtnClick" size="mini">按钮</button>
<button bind:tap="handleBtnClick" size="mini">按钮</button>
<button catch:tap="handleBtnClick" size="mini">按钮</button>

<!-- 2.常见的一些事件 -->
<view class="box" bind:touchstart="handleTouchStart"bind:touchmove="handleTouchMove" bind:touchend="handleTouchEnd" bind:tap="handleTap" bind:longpress="handleLongPress"></view>

<!-- 3.事件对象的分析 -->
<button id="btn" size="mini" bindtouchend="handleEventEnd" bindtap="handleEventClick">事件对象</button>

<view class="outer" id="outer" bindtap="handleOuter">
外层的view
  <view class="inner" id="inner" bindtap="handleInner">内层的view</view>
</view>

<!-- 4.事件的参数传递 -->
<view class="container">
  <block wx:for="{{titles}}" wx:key="{{index}}">
    <view class="item" bindtap="handleItemClick" data-index="{{index}}" data-item="{{item}}">{{item}}</view>
  </block>
</view>

<!-- 5.事件冒泡和事件捕获、catch和bind的区别 -->
<!-- bind：一层一层传递 -->
<!-- catch：阻止事件的进一步传递 -->
<view class="view1" capture-bind:tap="handleCaptureView1" bindtap="handleBindView1">
  <view class="view2" capture-catch:tap="handleCaptureView2" bindtap="handleBindView2">
    <view class="view3" capture-bind:tap="handleCaptureView3" bindtap="handleBindView3"></view>
  </view>
</view>

home.wxss：

/* pages/home/home.wxss */
.title{
  color:red;
  font-size: 30px;
 
}

.box{
  width: 300rpx;
  height: 300rpx;
  background-color: orange;
}

.outer{
  width: 400rpx;
  height: 400rpx;
  background-color: orange;
}

.inner{
  width: 200rpx;
  height: 200rpx;
  background-color: palegreen;
}

.view1{
  width: 600rpx;
  height: 600rpx;
  background-color: palegreen;
}

.view2{
  width: 400rpx;
  height: 400rpx;
  background-color: paleturquoise;
}

.view3{
  width: 200rpx;
  height: 200rpx;
  background-color: papayawhip;
}

home.js：

// pages/home/home.js
Page({

  data: {
    titles: ["衣服", "裤子", "鞋子"]
  },

  handleBtnClick() {
    console.log("按钮发生点击");
  },

  handleTouchStart() {
    console.log("handleTouchStart");
  },

  handleTouchMove() {
    console.log("handleTouchMove");
  },

  handleTouchEnd() {
    console.log("handleTouchEnd");
  },

  handleTap() {
    console.log("handleTap");
  },

  handleLongPress() {
    console.log("handleLongPress");
  },

  handleEventClick(event) {
    console.log("----------", event)
  },

  handleEventEnd(event) {
    console.log("++++++++++++", event);
  },

  handleInner(event) {
    console.log(event)
  },

  handleOuter(event) {
    console.log(event)
  },

  handleItemClick(event) {
    console.log(event)
    const dataset = event.currentTarget.dataset;
    const index = dataset.index;
    const title = dataset.item;
    console.log(dataset);
    console.log(index);
    console.log(title);
  },

  //事件冒泡和事件捕获
  handleCaptureView1() {
    console.log("handleCaptureView1");
  },
  handleBindView1() {
    console.log("handleBindView1");
  },
  
  handleCaptureView2() {
    console.log("handleCaptureView2");
  },
  handleBindView2() {
    console.log("handleBindView2");
  },
  
  handleCaptureView3() {
    console.log("handleCaptureView3");
  },
  handleBindView3() {
    console.log("handleBindView3");
  },
  

})