微信小程序事件传值

这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

各位小伙伴，大家好！刚好看到8月更文挑战，顺便就当作是记录学习笔记。第一次写文章，不足之处请多多包涵，写得不对的地方，欢迎指正！

什么是事件

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

事件传值

小程序可以在组件上绑定事件函数，再通过自定属性data-*来传递我们需要的值，然后通过事件对象中的currentTarget属性的dataset获取参数(event.currentTarget.dataset)

注意：data-*名称不能是大写字母

//.WXML
<view class="outer" id="father" bindtap="outerTap">
    <text>父层元素</text>
<!--    这里自定了data-name，data-age属性向点击事件传入的参数‘小红’和‘18’两个参数-->
    <view class="inner" id="child" bindtap="innerTap" data-name="小红" data-age="18">
        <text>子层元素</text>
    </view>
</view>
//.js
innerTap(event){
    console.log(event)
    //接收到的事件对象有以下属性
    /*
    * {type: "tap", timeStamp: 69544, target: {…}, currentTarget: {…}, mark: {…}, …}
        changedTouches: [{…}]
        currentTarget:
            dataset: {abc: "abc", age: "18", name: "小红"}
            id: "child"
            offsetLeft: 1
            offsetTop: 22
            __proto__: Object
        detail: {x: 71.13751220703125, y: 94.05004119873047}
        mark: {}
        mut: false
        target:
            dataset: {abc: "abc", age: "18", name: "小红"}
            id: "child"
            offsetLeft: 1
            offsetTop: 22
            __proto__: Object
        timeStamp: 69544
        touches: [{…}]
        type: "tap"
        _userTap: true
        __proto__: Object
    * */
    /*
    * 可以通过event.currentTarget.dataset拿到从WXML传递过来的参数*/
    console.log(event.currentTarget.dataset)//{age: "18", name: "小红"}
    
},

target和currentTarget的区别

采用bindtap绑定事件函数，当点击内层元素时，innerTap事件函数打输出的 event.target.dataset 和 event.currentTarget.dataset 相同，但是outerTap事件函数打输出的 event.target.dataset 为 {color: "red"} 和 event.currentTarget.dataset 为 {age: "18", name: "小红"}不相同。

由此可见：

target对应的是触发事件的源头组件，这个组件有可能是子组件，有可能是父组件，主要是看执行动作的区域。而currentTargent始终对应事件绑定的组件。

//.WXML
<view class="outer" id="father" bindtap="outerTap" data-color="red">
    <text>父层元素</text>
    <view class="inner" id="child" bindtap="innerTap" data-name="小红" data-age="18">
        <text>子层元素</text>
    </view>
</view>
//.WXSS
.outer{
    width: 300rpx;
    height: 300rpx;
    border: 2rpx solid red;
}
.inner{
    width: 200rpx;
    height: 200rpx;
    border: 2rpx solid black;
}
//.js
outerTap(event){
    console.log('我是外层元素')
    console.log('event.currentTarget.dataset: ',event.currentTarget.dataset)
    console.log('event.target.dataset: ',event.target.dataset)
},
innerTap(event){
    console.log('我是内层元素，我被点击了')
    console.log('event.currentTarget.dataset: ',event.currentTarget.dataset)
    console.log('event.target.dataset: ',event.target.dataset)
},
//我是内层元素，我被点击了
// event.currentTarget.dataset:  {age: "18", name: "小红"}
// 53 event.target.dataset:  {age: "18", name: "小红"}
// 我是外层元素
// event.currentTarget.dataset:  {color: "red"}
// event.target.dataset:  {age: "18", name: "小红"}