事件对象
小程序在触发事件监听方法的时候会自动传递一个事件对象给我们,通过这个事件对象我们可以拿到页面传递过来的一些数据。
事件对象的作用
- 拿到触发事件的元素: currentTarget
- 拿到触发事件的位置: detail
- 拿到从页面传递过来的数据: dataset/mark
页面传递数据的方法
- dataset
- mark
通过 dataset 传递数据:
官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#dataset
在 WXML 中,这些自定义数据以 data-
开头,多个单词由连字符 -
连接。这种写法中,连字符写法会转换成驼峰写法,而大写字符会自动转成小写字符。如:
data-element-type
,最终会呈现为event.currentTarget.dataset.elementType
;data-elementType
,最终会呈现为event.currentTarget.dataset.elementtype
。
dataset 示例:
index.wxml:
<view data-name="BNTang" bind:tap="oneTap">我是view</view>
index.js:
oneTap: function(event){ console.log('oneTap', event); console.log(event.currentTarget.dataset.name); },
小程序会自动将页面中data-xxx的数据放到事件对象的currentTarget的dataset中。
mark 示例:
index.wxml:
<view mark:name="BNTang" bind:tap="oneTap">我是view</view>
index.js:
oneTap: function(event){ console.log('oneTap', event); console.log(event.mark.name); },
小程序会自动将页面中mark:xxx的数据放到事件对象的mark属性中。
遗留问题:为什么要有两种传递数据的方式?
!> 涉及到事件冒泡和捕获/涉及到嵌套结构/涉及到currentTarget