微信小程序 - bindtap等事件传参

什么是事件
事件是视图层到逻辑层的通信方式。 事件能够将用户的行为反馈到逻辑层进行处理。
事件能够绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象能够携带额外信息，如 id, dataset, touches。

 

 

看图，由于须要传递的数据比较多，因此咱们经过dataset携带参数信息。若是只有一个参数，能够经过id来传递。

详解（以常见的tap点击事情为例）
wxml：
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

JS:

Page({ tapName: function(event) {

console.log(event)

} })

event 打印结果

{
"type":"tap",
"timeStamp":895,
/////////////////////////////////
"target": {
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
"currentTarget": {
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
///////////////////////////////
"detail": {
"x":53,
"y":14
},
"touches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}],
"changedTouches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}]
}

注意两点：
一、data-名称 不能有大写字母，若是须要，能够经过 - （中划线）来链接单词，编译的时候小程序会将第二个单词首字母自动大写。图中代码是为了本身标志，因此第二个单词的首字母大写了，其实能够不用。data-* 属性中不能够存放对象。

二、注意打印结果中target和currentTarget的区别。

target 触发事件的源组件。
currentTarget 事件绑定的当前组件。

若是你在父容器上绑定了事件并传参，当你点击父容器时，事件绑定的组件和触发事件的源组件是同一个元素，因此currentTarget 、target 均可以拿到参数，可是当你点击子元素时，target 就不是事件绑定的组件了，因此拿不到参数。
因为事件冒泡的机制，父容器上绑定的事件依然能够触发，因此currentTarget 依然能够拿到参数。

说明id传参和dataset相似，只是最后获取值的时候不一样。event.currentTarget.id