微信小程序初探之事件对象

106 阅读1分钟

在微信小程序的开发过程中,有时需要获取事件发生时的一些信息,例如事件类型、事件发生的时间、触发事件的对象等,此时可以通过事件对象来获取。

当事件处理函数被调用时,微信小程序会将事件对象以参数的形式传给事件处理函数。事件对象的属性如表所示。

属性类型说明
typestring事件类型
timeStampnumber事件生成的事件戳
targetobject触发事件的组件的一些属性值集合
currentTargetobject当前组件的一些属性集合
markobject事件标记数据

对于初学者来说,事件对象属性中的target和currentTarget较难理解。target表示获取触发事件的组件的一些属性值集合;而currentTarget表示获取当前组件的一些属性值集合。下面通过案例来演示事件对象属性中target和currentTarget的区别。

<view bindtap="viewtap"id="outer">  outer  <view id="inner">      inner  </view></view>

在上述代码中,父元素outer绑定了viewtap()事件处理函数,而子元素没有绑定,但是由于子元素是父元素的一部分,因此点击子元素也会触发viewtap()事件处理函数。

viewtapfunction (e) {   console.log(e.target.id + '-' + e.currentTarget.id) },

在上述代码中,使用e.target.id或e.currentTarget.id都可以获取发生事件的组件的id,由于outer和inner的id不同,因此可以区分这两个组件。

运行程序测试,当单击outer时,控制台中的输出结果为outer-outer。

image.png

而单击inner时,控制台中的输出结果为inner-outer。

image.png

由此可见,e.target获取的是子元素的属性值集合,而e.currentTarget获取的是父元素的属性值集合。