微信小程序事件传值

·  阅读 981
微信小程序事件传值

这是我参与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: "小红"}
复制代码
分类:
前端
收藏成功!
已添加到「」, 点击更改