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

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

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

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

官方文档：<https://mp.weixin.qq.com/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 触发时间的对象一定是绑定事件的对象，没有事件委托。使用最多的是这个。

微信小程序学习5：小程序语法-事件绑定之给事件传递参数相关推荐

小程序学习 - 01小程序简介+微信小程序基础
小程序简介小程序是一个全新的.轻量级的移动端应用. 起源在小程序出现之前的移动端开发的解决方案有: Android iOS Windows Phone - 后来退出历史舞台移动端开发发展了一段时 ...
微信小程序学习-黑马商城程序（更新中~）
目录小程序基础知识小程序常用标签自定义属性,可用于传参小程序的for循环小程序中的方法如何携带参数小程序中常用的布局组件 view 类似于div.p,用于包裹内容 text 文本,类似于s ...
微信小程序学习笔记 ( 小程序主体学习二逻辑层 app.js 扩展高级食用方法)
目录结构上图是我建立的的微信小程序的目录结构主体学习逻辑层(App Service) 小程序开发框架的逻辑层由 JavaScript 编写. 逻辑层将数据进行处理后发送给视图层,同时接受视 ...
微信小程序学习——视频播放小程序
一.视图设计 (一)导航栏设计 # app.json--导航栏设置 {"pages":["pages/index/index"],"window&qu ...
小程序学习---开启小程序之旅（项目、配置、页面、数据绑定）
一.前沿从这个章节开始进入实战状态,利用项目以及小demo来逐步认识小程序.主要包含以下内容 1.注册程序和页面 2.数据绑定 3.循环 4.条件 5.运算 6.模板 7.事件 8.引用 9.组件 ...
小程序学习之小程序组件（三）表单组件
1.button 按钮组件组件的属性: 1)size属性 default 默认值宽度与手机屏幕宽度相同 mini 迷你型,按钮尺寸.字号都比普通按钮小 2)t ...
前端学习（2812）：前端小程序学习之小程序发展历史
c语言cgi json,CGI程序学习(4)-C程序中JSON解析
C程序中数据封装和解析也可以用到JSON,不过需要额外添加json.h库 #include //用于存储数据 int array_number; char wifiname_user[100][100 ...
【Qt学习】04 信号-槽子窗口向主窗口传递参数
概述学习内容:子对话框向主对话框发送消息,使用SIGNAL-SLOT实现. 环境 IDE:Qt creator 4.11.0 编译器:MinGW 5.3.0 32bit for C++ 例子 1.s ...

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

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

微信小程序学习5：小程序语法-事件绑定之给事件传递参数相关推荐

最新文章

热门文章