事件处理详解

Author: coderwhy

pages/home/home.js

@@ -1,66 +1,64 @@
 // pages/home/home.js
 Page({
-
-  /**
-   * 页面的初始数据
-   */
   data: {
-
+    titles: ['衣服', '裤子', '鞋子']
   },
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad: function (options) {
-
+  handleBtnClick() {
+    console.log('按钮发生点击')
   },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
+  handleTouchStart() {
+    console.log('handleTouchStart')
   },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
+  handleTouchMove() {
+    console.log('handleTouchMove')
   },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
+  handleTouchEnd() {
+    console.log('handleTouchEnd')
   },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
+  handleTap() {
+    console.log('handleTap')
   },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
+  handleLongpress() {
+    console.log('handleLongpress')
   },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
+  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)
+    // title - index
+    const dataset = event.currentTarget.dataset;
+    const title = dataset.item;
+    const index = dataset.index;
+    console.log(title, index)
   },
 
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
+  // ----------  事件冒泡和事件捕获
+  handleCaptureView1() {
+    console.log('handleCaptureView1')
+  },
+  handleBindView1() {
+    console.log('handleBindView1')
+  },
+  handleCaptureView2() {
+    console.log('handleCaptureView2')
+  },
+  handleBindView2() {
+    console.log('handleBindView2')
+  },
+  handleCaptureView3() {
+    console.log('handleCaptureView3')
+  },
+  handleBindView3() {
+    console.log('handleBindView3')
   }
-})
+})

pages/home/home.wxml

@@ -1,3 +1,44 @@
 <!--pages/home/home.wxml-->
-<text class='title'>Hello World</text>
-<button size='mini'>按钮</button>
+<!-- 1.事件处理的回顾 -->
+<button bindtap='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' 
+        bindtap='handleEventClick'
+        bindtouchend='handleEventEnd'>事件对象</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-bind:tap="handleCaptureView2" catchtap='handleBindView2'>
+    <view class='view3' capture-bind:tap="handleCaptureView3" bindtap='handleBindView3'></view>
+  </view>
+</view>

pages/home/home.wxss

@@ -3,3 +3,50 @@
   color: red;
   font-size: 30px;
 }
+
+.box {
+  width: 300rpx;
+  height: 300rpx;
+  background: orange;
+}
+
+.outer {
+  width: 400rpx;
+  height: 400rpx;
+  background: red;
+  color: white;
+}
+
+.inner {
+  width: 200rpx;
+  height: 200rpx;
+  background: blue;
+  color: white;
+}
+
+.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+  text-align: center;
+}
+
+.view1 {
+  width: 600rpx;
+  height: 600rpx;
+  background: red;
+}
+
+.view2 {
+  width: 400rpx;
+  height: 400rpx;
+  background: blue;
+}
+
+.view3 {
+  width: 200rpx;
+  height: 200rpx;
+  background: green;
+}