你的位置:首页 > 信息动态 > 新闻中心
信息动态
联系我们

微信小程序 事件学习总结

2021-11-24 2:23:48

ui静态页面基本写好了,在js中绑定事件不会写了,突然感觉对小程序还是理解的不是太多,又重新查看了下小程序官方文档把重点记录下来。

大致如下:

点击事件:Tap
长按事件:longTap
触摸事件:touchstart、touchend、touchmove、touchcancel
其他事件:submit input 等
其中,点击事件、长按事件、触摸事件都属于冒泡事件,其他事件属于非冒泡事件。


事件绑定

  • bind
  • catch
  • mut-bind
  • capture-bind
  • capture-catch
<view  bindtap="handleTap1">

  <view  catchtap="handleTap2">

    <view  bindtap="handleTap3">

    </view>
    
  </view>
  
</view>

可以用capture-bindcapture-catch关键字取消冒泡以及中断捕获

<view bind:touchstart="handleTap1" capture-bind:touchstart="handleTap4">

  <view bind:touchstart="handleTap3" capture-bind:touchstart="handleTap5">

  </view>
  
</view>

事件分类

  • 冒泡事件
  • 非冒泡事件

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

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

其他事件

form表单submit事件
input的input事件
scroll-view的scroll事件

<view bindtap="{{ handlerName }}">
    Click here!
</view>

事件对象

1. BaseEvent 基础事件对象属性

属性类型说明
typestring事件类型
timeStampinteger事件生成时的时间戳,页面打开到触发事件所经过的毫秒数
targetobject触发事件的组件的一些属性值集合
currentTargetobject当前组件的一些属性值集合
markobject事件标记数据
<view id="tapTest" value='cc' data-hi="WeChat" bindtap="tapName"> Click me! </view>**加粗样式**
tapName: function(event) {
    console.log(event)
 }

打印出来

{
"type":"tap",
"timeStamp":895,
"target": {
  "id": "tapTest",
  "dataset":  {
    "hi":"WeChat"
  }
},
"currentTarget":  {
  "id": "tapTest",
  "dataset": {
    "hi":"WeChat"
  }
},
"detail": {
  "x":53,
  "y":14,
  value:"cc"
}

target属性有id、dataser两个

属性类型说明
idString事件源组件的id
dataserObject事件源组件上由data-开头的自定义属性组成的集合

2. CustomEvent 自定义事件对象属性列表(继承BaseEvent )

属性类型
detailObject

detail,自定义事件所携带的数据

3. TouchEvent 触摸事件对象属性列表(继承 BaseEvent)

属性类型说明
touchesArray触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouchesArray触摸事件,当前变化的触摸点信息的数组

组件间通信与事件

组件间的基本通信方式有以下几种

  • WXML 数据绑定
  • 事件:用于子组件向父组件传递数据,可以传递任意数据
  • 父组件还可以通过 this.selectComponent 方法获取子组件实例对象

监听事件

事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件,引用组件的页面可以监听这些事件

触发事件

自定义组件触发事件时,需要使用 triggerEvent 方法,指定事件名、detail对象和事件选项

!-- 在自定义组件中 -->
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
Component({
  properties: {},
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail对象,提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})