小程序的事件分类和事件详细解释

待我称王封你为后i 2022-10-16 07:54 281阅读 0赞

小程序事件分为冒泡事件和非冒泡事件：

**冒泡事件：** 当一个组件上的事件被触发后，该事件会向父节点传递。  
**非冒泡事件：** 当一个组件上的事件被触发后，该事件不会向父节点传递。

**WXML的冒泡事件列表：**  
touchstart 手指触摸动作开始  
touchmove 手指触摸后移动  
touchcancel 手指触摸动作被打断，如来电提醒，弹窗  
touchend 手指触摸动作结束  
tap 手指触摸后马上离开  
longpress 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 1.5.0  
longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替）  
transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发  
animationstart 会在一个 WXSS animation 动画开始时触发  
animationiteration 会在一个 WXSS animation 一次迭代结束时触发  
animationend 会在一个 WXSS animation 动画完成时触发  
touchforcechange 在支持 3D Touch 的 iPhone 设备，重按时会触发

普通事件绑定： bindtap  
绑定并阻止事件冒泡：catchtap  
与 bind 不同， catch 会阻止事件向上冒泡。

<view id="outer" bindtap="handleTap1">
          outer view
        <view id="middle" bindtap="handleTap2">
            middle view
          <view id="inner" bindtouchstart="handleTap3">
            inner view
          </view>
        </view>
      </view>
    <script> handleTap1:function(){ console.log('outer')}, handleTap2:function(){ console.log('middle')}, handleTap3:function(){ console.log('innder')}, </script>

当点击inner view的时候会依次触发父节点的绑定事件  
控制台输出

// innder
    // middle
    // outer

如果不想触发冒泡事件 请使用catch 绑定事件

<view id="outer" catchtap="handleTap1">
        outer view
       <view id="middle" catchtap="handleTap2">
           middle view
         <view id="inner" catchtap="handleTap3">
           inner view
         </view>
       </view>
     </view>

除 bind 和 catch 外，还可以使用 mut-bind 来绑定事件。一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发。  
所有 mut-bind 是“互斥”的，只会有其中一个绑定函数被触发。同时，它完全不影响 bind 和 catch 的绑定效果。

事件的捕获阶段  
自基础库版本 1.5.0 起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
      outer view
      <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
        inner view
      </view>
    </view>

如果将上面代码中的第一个capture-bind改为capture-catch，将只触发handleTap2。

小程序的事件对象

<view id="inner" data-index="handleTap3" data-id="666" bindtouchstart="handleTap3">
       inner view
     </view>
    <script> handleTap3:function(event){ console.log('innder',event)}, </script>

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70_pic_center]  
这里传递参数的时候，可以改成在组件是绑定 data-xxx,绑定的值在event事件中通过  
event.target.dataset.xxx来获取

小程序事件官方的说明文档：  
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221014/5664a7be8d964c0d83ea145c4bd21059.png