事件定义

在小程序中绑定事件可以以bind开头然后跟上事件的类型,如bindtap绑定一个点击事件,对应的值是一个字符串,需要在page构造器中定义同名函数,每次触发事件之后就会执行对应函数的内容。

点击事件

另一种写法

// pages/my/index.js

Page({

handleTap(){

console.log("执行了点击事件");

}

})

常见事件类型

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 动画完成时触发

阻止事件冒泡

在小程序中除了通过bind之外,还可以通过catch进行事件绑定,通过catch绑定的事件不会触发事件冒泡。

事件捕获

事件的触发分为两个阶段,首先是捕获阶段,其次是冒泡阶段。默认情况下事件都是在冒泡阶段触发。如果希望事件可以在捕获阶段触发,可以通过capture-bind进行事件绑定。

事件传参

在小程序中进行事件传参不能像传统的Web项目中一样,在括号里写参数。在小程序中需要在标签上通过data-方式定义事件所需的参数。

点击事件

每个事件回调触发时,都会收到一个事件对象,通过这个对象可以获取路由传递的参数。

handleTap(e){

console.log("执行了点击事件");

// 通过currentTarget中的dataset属性可以获取时间参数

console.log(e.currentTarget.dataset.msg);

}

关于这个事件对象其他属性

type 事件类型

timeStamp 页面打开到触发事件所经过的毫秒数

target 触发事件的组件的一些属性值集合

currentTarget 当前组件的一些属性值集合

detail 额外的信息

touches 触摸事件,当前停留在屏幕中的触摸点信息的数组

changedTouches 触摸事件,当前变化的触摸点信息的数组

这里需要注意的是target和currentTarget的区别,currentTarget为当前事件所绑定的组件,而target则是触发该事件的源头组件。