小さなプログラムイベントの処理

1 アプレットのイベント監視

2 一般的なイベントタイプの分類

3 イベントオブジェクト属性の分析

4 イベントパラメータの受け渡し方法

5 イベント配信事例演習

バブリングとトラッピングの6つのゾーン

イベントには、公開イベントとタグ固有のイベントが含まれます。

イベントがトリガーされると、関数およびメソッドで使用できるイベントオブジェクトイベントコールバックが存在します。

イベントでは、target と currentTarget の 2 つのパラメーターに注意する必要があります。

クリックイベントは親要素に設定され、子要素にはイベントがありません。子要素をクリックし、親要素をクリックして、親要素のクリックイベント (バブル) をトリガーします。このとき、設定した場合、親要素の data-* パラメーターの場合、親要素をクリックしてトリガーされるイベントはこのパラメーターを取得できますが、子要素をクリックしてトリガーされるイベントは親要素のパラメーターを取得できません。最後に、親要素のイベントについて、const data = event.currnetTarget.dataset で定義されたパラメーター名から data-* のパラメーターを取得できます。target は子要素を指し、currentTarget は親要素を指します。

mark は data-* のようなパラメーターを渡すことができます。

イベント | WeChat オープンドキュメント (qq.com) https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#mark

イベントのバブリングとイベントキャプチャの順序は、イベントキャプチャはバブリングよりも早く、キャプチャは外側から内側にイベントをキャプチャし、内側から外側にバブリングします。火を捕らえ、泡立たせる。

capture-catch:tap が使用されている場合、イベントのそれ以上の配信は防止されます。例えば：

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

タブケース等：

wxml：


<button bindtap="onBtnTap">按钮</button>


<view id="outer" class="outer" data-name="why" bindtap="onOuterViewTap">
  <view id="inner" class="inner"></view>
</view>


<view
  class="touches"
  bindtap="onTouchTap"
  bindlongpress="onLongPress"
  bindtouchend="onTouchEnd"
>
  多指触摸
</view>


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



<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>


<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>





<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);
  }
})

小さなプログラム イベントの処理

おすすめ

小さなプログラムイベントの処理