微信小程序-事件传递数据

事件对象

小程序在触发事件监听方法的时候会自动传递一个事件对象给我们，通过这个事件对象我们可以拿到页面传递过来的一些数据。

事件对象的作用

• 拿到触发事件的元素: 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