在微信小程序的开发过程中,有时需要获取事件发生时的一些信息,例如事件类型、事件发生的时间、触发事件的对象等,此时可以通过事件对象来获取。
当事件处理函数被调用时,微信小程序会将事件对象以参数的形式传给事件处理函数。事件对象的属性如表所示。
| 属性 | 类型 | 说明 |
|---|---|---|
| type | string | 事件类型 |
| timeStamp | number | 事件生成的事件戳 |
| target | object | 触发事件的组件的一些属性值集合 |
| currentTarget | object | 当前组件的一些属性集合 |
| mark | object | 事件标记数据 |
对于初学者来说,事件对象属性中的target和currentTarget较难理解。target表示获取触发事件的组件的一些属性值集合;而currentTarget表示获取当前组件的一些属性值集合。下面通过案例来演示事件对象属性中target和currentTarget的区别。
<view bindtap="viewtap"id="outer"> outer <view id="inner"> inner </view></view>
在上述代码中,父元素outer绑定了viewtap()事件处理函数,而子元素没有绑定,但是由于子元素是父元素的一部分,因此点击子元素也会触发viewtap()事件处理函数。
viewtap: function (e) { console.log(e.target.id + '-' + e.currentTarget.id) },
在上述代码中,使用e.target.id或e.currentTarget.id都可以获取发生事件的组件的id,由于outer和inner的id不同,因此可以区分这两个组件。
运行程序测试,当单击outer时,控制台中的输出结果为outer-outer。
而单击inner时,控制台中的输出结果为inner-outer。
由此可见,e.target获取的是子元素的属性值集合,而e.currentTarget获取的是父元素的属性值集合。