微信小程序学习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.iddata-xxx:
event.currentTarget.dataset.key
|| event.target.dataset.key
书写回调函数一定要添加event事件参数(event名称可以自定义)
打印event对象可以得到下图的信息。
可以看到在
currentTarget
,和target
对象里都有我们传递的参数。但我们常使用的是
currentTarget
Event.target 和 event.currentTarget 的区别
a)
Event.target
是触发事件的对象,但不一样是绑定事件的对象,如: 事件委托,冒泡b)
currentTarget
触发时间的对象一定是绑定事件的对象, 没有事件委托。使用最多的是这个。