600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 微信小程序学习5:小程序语法-事件绑定之给事件传递参数

微信小程序学习5:小程序语法-事件绑定之给事件传递参数

时间:2024-05-01 19:08:01

相关推荐

微信小程序学习5:小程序语法-事件绑定之给事件传递参数

微信小程序学习5:小程序语法-事件绑定之给事件传递参数

前面一讲是关于事件绑定的,下面对事件绑定进行补充。

在用户触发事件,比如点击按钮时,我们往往要传递一下参数用来识别是那个按钮,因为一个界面往往不止一个按钮控件。

还有,我们也可能要实时收集一下界面信息,所以也需要传递参数。

官方文档:<https://mp./debug/wxadoc/dev/framework/view/wxml/event.html>

示例代码

xxx.wxml文件:创建一个按钮控件,绑定了callBack1回调函数,有3个可以传递参数的属性:id,data-aaa,data-bbb

<view class="container"><button bindtap="callBack1" id="1111" data-aaa="aaa" data-bbb="bbb">按钮</button></view>

说明:

id属性是唯一标识这个控件的属性,具有唯一性,作用很多,不止可以当做传递参数来用。往往只是在标识这个控件时使用。

data-type(type可变) 这是专门用来传递参数的,type是自定义,属性值也是可以任意赋值,没有唯一性。

xxx.js

// 事件处理函数callBack1 (event){console.log(event) //打印事件传递的信息对象console.log("id值:",event.currentTarget.id);console.log("data-aaa值:",event.currentTarget.dataset.aaa);console.log("data-bbb值:",event.currentTarget.dataset.bbb);}

获取参数方式

id :event.currentTarget.id|| event.target.id

data-xxx:event.currentTarget.dataset.key|| event.target.dataset.key

书写回调函数一定要添加event事件参数(event名称可以自定义)

打印event对象可以得到下图的信息。

可以看到在currentTarget,和target对象里都有我们传递的参数。

但我们常使用的是currentTarget

Event.target 和 event.currentTarget 的区别

a)Event.target是触发事件的对象,但不一样是绑定事件的对象,如: 事件委托,冒泡

b)currentTarget触发时间的对象一定是绑定事件的对象, 没有事件委托。使用最多的是这个

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。