Small program event handling

Table of contents:

1 Event monitoring of applets

2 Classification of common event types

3 Analysis of event object attributes

4 Event parameter passing method

5 Event delivery case exercises

6 Zones of bubbling and trapping

Events include public events and tag-specific events.

When an event is triggered, there will be an event object event callback that can be used in functions and methods.

In the event, you need to pay attention to the two parameters target and currentTarget:

The click event is set in the parent element, and the child element has no event; we click on the child element and click on the parent element to trigger the click event (bubble) of the parent element; at this time, if we set a data-* parameter on the parent element , the event triggered by clicking the parent element can get this parameter, but the event triggered by clicking the child element cannot get the parameter of the parent element. Finally, for the event on the parent element, we can get the parameters of data-* through the parameter name defined by const data = event.currnetTarget.dataset. target will point to the child element, and currentTarget will point to the parent element.

mark can pass parameters like data-*.

Event | WeChat Open Documentation (qq.com) https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#mark

 

 

 The order of event bubbling and event capture is: event capture is earlier than bubbling, capture captures events from outside to inside, and bubbling from inside to outside. Both capturing and bubbling fire.

 

 

If capture-catch:tap is used, further delivery of the event will be prevented. for example:

<view class="view1" capture-catch:tap="onView1CaptureTap" bindtap="onView1Tap">

Tab case etc.:

wxml：

<!--pages/06_learn_event/index.wxml-->
<!-- 1.事件的基本使用 -->
<button bindtap="onBtnTap">按钮</button>

<!-- 2.event中target和currentTarget区别 -->
<view id="outer" class="outer" data-name="why" bindtap="onOuterViewTap">
  <view id="inner" class="inner"></view>
</view>

<!-- 3.event中touches和changeTouches区别 -->
<view
  class="touches"
  bindtap="onTouchTap"
  bindlongpress="onLongPress"
  bindtouchend="onTouchEnd"
>
  多指触摸
</view>

<!-- 4.event的参数传递 -->
<view 
  class="arguments"
  bindtap="onArgumentsTap"
  data-name="why"
  data-age="18"
  data-height="1.88"
>
  参数传递
</view>


<!-- 5.tab-control案例(重要) -->
<view class="tab-control">
  <block wx:for="{
    
    { titles }}" wx:key="*this">
    <view 
      class="item {
    
    {index === currentIndex ? 'active': ''}}"
      bindtap="onItemTap"
      data-index="{
    
    {index}}"
    >
      <text class="title">{
    
    { item }}</text>
    </view>
  </block>
</view>

<!-- 6.捕获和冒泡阶段 -->
<view class="view1" capture-bind:tap="onView1CaptureTap" bindtap="onView1Tap">
  <view class="view2" capture-bind:tap="onView2CaptureTap" bindtap="onView2Tap">
    <view class="view3" capture-bind:tap="onView3CaptureTap" bindtap="onView3Tap"></view>
  </view>
</view>

<!-- 7.将bind替换为catch: 阻止事件仅一步传递(了解) -->


<!-- 8.给逻辑传递数据, 另外一种方式: mark -->
<view 
  class="mark"
  bindtap="onMarkTap"
  data-name="why"
  data-age="18"
  mark:name="kobe"
  mark:age="30"
>
 <text mark:address="洛杉矶" class="title">mark</text>
</view>

wxss：

/* pages/06_learn_event/index.wxss */
.outer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400rpx;
  height: 400rpx;
  background-color: orange;
}

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

.touches, .arguments {
  height: 100rpx;
  color: white;
}

.touches {
  background-color: green;
}

.arguments {
  background-color: purple;
}

/* tab-control */
.tab-control {
  display: flex;
  height: 40px;
  line-height: 40px;
  text-align: center;
}

.tab-control .item {
  flex: 1;
}

.tab-control .item.active {
  color: #ff8189;
}

.tab-control .item.active .title {
  border-bottom: 3px solid #ff8189;
  padding: 5px;
}


/* 捕获和冒泡 */
.view1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600rpx;
  height: 600rpx;
  background-color: orange;
}

.view2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400rpx;
  height: 400rpx;
  background-color: purple;
}

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

/* mark样式 */
.mark {
  height: 100rpx;
  background-color: skyblue;
}

.mark .title {
  background-color: #ff0;
}

js：

// pages/06_learn_event/index.js
Page({
  data: {
    titles: ["手机", "电脑", "iPad", "相机"],
    currentIndex: 0
  },

  onItemTap(event) {
    const currentIndex = event.currentTarget.dataset.index
    console.log(currentIndex);
    this.setData({ currentIndex })
  },

  // 绑定事件监听函数
  onBtnTap(event) {
    console.log("onBtnTap:", event);
  },
  onOuterViewTap(event) {
    // 1.target触发事件的元素
    // 2.currentTarget处理事件的元素
    console.log("onOuterViewTap:", event);
    console.log(event.target);
    console.log(event.currentTarget);

    // 3.获取自定义属性: name
    const name = event.currentTarget.dataset.name
    console.log(name);
  },

  // 监听触摸事件
  onTouchTap(event) {
    console.log("tap:", event);
  },
  onLongPress(event) {
    console.log("long:", event);
  },
  onTouchEnd(event) {
    console.log("end:", event);
  },

  // 监听事件, 并且传递参数
  onArgumentsTap(event) {
    console.log("onArgumentsTap:", event);
    const { name, age, height } = event.currentTarget.dataset
    console.log(name, age, height);
  },

  // 捕获和冒泡过程
  onView1CaptureTap() {
    console.log("onView1CaptureTap");
  },
  onView2CaptureTap() {
    console.log("onView2CaptureTap");
  },
  onView3CaptureTap() {
    console.log("onView3CaptureTap");
  },
  onView1Tap() {
    console.log("onView1Tap");
  },
  onView2Tap() {
    console.log("onView2Tap");
  },
  onView3Tap() {
    console.log("onView3Tap");
  },

  // mark的数据传递
  onMarkTap(event) {
    console.log(event);
    const data1 = event.target.dataset
    console.log(data1);

    const data2 = event.mark
    console.log(data2);
  }
})