零基础手把手教你创建微信小程序（十六）·事件传参·data-*自定义数据

事件传参：在触发事件时,将一些数据作为参数传递给事件处理函数的过程,就是事件传参。

在微信小程序中,我们经常会在组件上添加一些自定义数据,然后在事件处理函数中获取这些自定义数据,从而完成业务逻辑的开发。

在组件上通过data-"的方式定义需要传递的数据,其中*是自定义的属性,例如: <view data-id="100" bindtap="handier"/>然后通过事件对象进行获取自定义数据。

步骤一：创建按钮

打开微信开发者工具，找到“分类”，根据其路径，找到cate.wxml文件，在其中创建一个按钮，写入代码：


<view>
  <button>按钮</button>
</view>

步骤二：按钮样式配置

找到cate.scss文件，对按钮样式进行配置：


view{
  display: flex;
  height: 300rpx;
  background-color: skyblue;
  align-items: center;
}

步骤三：创建事件处理函数

找到cate.wxml文件，给其创建一个事件处理函数：


<view>
  <button bind:tap="btnHandler">按钮</button>
</view>

步骤四：进行事件传参

事件传参，如果需要进行事件传参，需要再组件上通过 data- 的方式进行传递数据：


<view>
  <!-- 如果需要进行事件传参，需要再组件上通过 data- 的方式进行传递数据 -->
  <button bind:tap="btnHandler" data-id="1" data-name="tom">按钮</button>
</view>

步骤五：事件对象的打印

如果想接受处理到的数据需要通过事件对象来进行，找到cate.js文件，进行事件对象的打印：


Page({
  // 给事件处理函数添加事件对象“event”
  btnHandler(event){
    // 打印事件对象
    console.log(event)
  },


})

步骤六：获取事件处理函数数据

currentTarget：事件绑定者，也就是，哪个组件绑定了当前事件处理函数。

target：事件触发者，也就是，哪个组件触发了当前事件处理函数。

1. currentTarget 和 target 是指同一种组件数据获取

currentTarget 和 target 都是指按钮，因为是按钮绑定的事件处理函数，同时点击按钮触发事件处理函数。这时候通过谁来获取数据都可以。


Page({
  // 给事件处理函数添加事件对象“event”
  btnHandler(event){
    // 打印事件对象
    console.log(event.currentTarget.dataset.id)
    console.log(event.target.dataset.name)
  },


})

2. currentTarget 和 target 不是指同一种组件数据获取

找到cate.wxml文件，对事件处理函数进行更改：


<view bind:tap="parentHandler" data-parentid="1" data-parentname="tom">
  <!-- 如果需要进行事件传参，需要再组件上通过 data- 的方式进行传递数据 -->
  <!-- <button bind:tap="btnHandler" data-id="1" data-name="tom">按钮</button> -->

  <button data-id="1" data-name="tom">按钮</button>
</view>

找到cate.js文件，打印parentHandler此时的事件对象：

  parentHandler(event){
    // 点击蓝色区域（不点击按钮）
    // currentTarget 事件绑定者：view
    // target 事件触发者：view
    // currentTarget 和 target 都是指view，如果想获取 view 身上的数据，使用谁都可以
    console.log(event)

  }

2.1 点击蓝色区域（不点击按钮）

currentTarget 事件绑定者：view

target 事件触发者：view

可以看到currentTarget 和 target 都是指view，如果想获取 view 身上的数据，使用谁都可以。

2.2 不点击蓝色区域（点击按钮）

currentTarget 事件绑定者：view

target 事件触发者：按钮

  parentHandler(event){
    // 点击蓝色区域（不点击按钮）
    // currentTarget 事件绑定者：view
    // target 事件触发者：view
    // currentTarget 和 target 都是指view，如果想获取 view 身上的数据，使用谁都可以

    // 不点击蓝色区域（点击按钮）
    // currentTarget 事件绑定者：view
    // target 事件触发者：按钮
    // 如果想获取 view 身上的数据，就必须使用 currentTarget 才可以
    // 如果想获取的是时间触发者本身数据，就需要使用 target
    console.log(event)

  }
})

如果想获取 view 身上的数据，就必须使用 currentTarget 才可以。

如果想获取的是时间触发者本身数据，就需要使用 target。

3. 注意事项

若是事件连续单词组成，例如将“data-parentid”改为“data-parent-id”：

<view bind:tap="parentHandler" data-parent-id="1" data-parentname="tom">
  <!-- 如果需要进行事件传参，需要再组件上通过 data- 的方式进行传递数据 -->
  <!-- <button bind:tap="btnHandler" data-id="1" data-name="tom">按钮</button> -->

  <button data-id="1" data-name="tom">按钮</button>
</view>

在传递参数时，如果自定义属性是多个单词，单词与单词直接使用中划线 - 进行连接，在事件对象中会被转换为小托峰写法。

若是事件连续单词组成改成小托峰写法，例如将“data-parentname”改为“data-parentName”：


<view bind:tap="parentHandler" data-parent-id="1" data-parentName="tom">
  <!-- 如果需要进行事件传参，需要再组件上通过 data- 的方式进行传递数据 -->
  <!-- <button bind:tap="btnHandler" data-id="1" data-name="tom">按钮</button> -->

  <button data-id="1" data-name="tom">按钮</button>
</view>

在传递参数时，如果自定义属性是多个单词，单词如果使用小托峰写法，在事件对象中会被转换为全部小写。