微信小程序学习4:小程序语法 - 事件绑定
微信小程序学习4:小程序语法 - 事件绑定
事件绑定最简单的例子是,你设置一个按钮为可触发的,触发条件可以是点击,按压,长按等等。当然,如果你仅仅是设置了触发事件,而没有创建回调函数,是不会产生什么效果的。只有你把设置触发时的回调函数实现,你点击按钮才会有相应动作。
所以一个完整的事件绑定应该包括事件在
*.wxml
的声明,和在*.js
的回调函数
事件绑定承担了对用户的点击,长按等动作做出回应的功能
事件官方文档
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
类型 | 触发条件 |
---|---|
touchstart | 手指触摸动作开始 |
touchmove | 手指触摸后移动 |
touchcancel | 手指触摸动作被打断,如来电提醒,弹窗 |
touchend | 手指触摸动作结束 |
tap | 手指触摸后马上离开 |
tap
就是点击事件,最常用
事件分类
- 冒泡事件
a) 定义:冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
b) 我们一般书写的都是冒泡事件,但我们一般只在一个控件绑定事件,不会嵌套,这种可以说是普通事件。
b) 关键词:bind
+事件关键词
- 非冒泡事件
a) 定义:当一个组件上的事件被触发后,该事件不会向父节点传递。
b) 非冒泡事件:表单事件和自定义事件通常是非冒泡事件
c) 关键词 :catch
+事件关键词
bind
绑定的事件不一定是冒泡事件,冒泡事件只有在嵌套多层bind
事件才体现出来。我们一般可以说,只有一个bind
绑定事件的组件情况叫做普通事件。
1 冒泡事件实例
普通事件绑定,没有嵌套的bind
事件
事件绑定的写法类似于组件的属性,如:bindtap="handleTap"
这是一个点击事件
页面.wxml
<view bindtap="handleTap">Click here!
</view>
如果用户点击这个 view组件 ,则页面的 handleTap 会被调用。
页面.js
回调函数
重点:函数名称就是上面事件绑定时等号右边的字符串
handleTap
handleTap: function(event) {console.log('点击了')},// 写法二,event是个回调参数,可以不写handleTap() {console.log('点击了')},
正常冒泡事件
页面.wxml
的事件绑定声明,可以看到有两层嵌套。
当点击
text
控件时。最先触发的事件是bindtap="handleChild"
,她在最里面。之后会连带触发bindtap="handleParent"
事件。这种情况事件是从里往外触发的就像冒泡一样,所有叫冒泡事件。
当点击view
控件时,只会触发bindtap="handleParent"
事件。因为它是最外层的,没有可以冒泡的控件了。
<view bindtap="handleParent" class="goStudy"><text bindtap="handleChild">hello world!</text></view>
页面.js
创建回调函数
在Page对象中定义函数属性
handleParent: function(event) {console.log('handleParen')},handleChild: function(event) {console.log('handleChild')},
点击hello world!
会先输出 handleChild,再输出handleParen
2 非冒泡事件实例
<view bindtap="handleParent" class="goStudy"><text catchtap="handleChild">hello world!</text></view>
与 bind
不同, catch
会阻止事件向上冒泡。
例如在下边这个例子中,点击 inner view
会先后调用handleTap3
和handleTap2
(因为tap事件会冒泡到 middle view
,而 middle view
阻止了 tap 事件冒泡,不再向父节点传递),点击 middle view
只会触发handleTap2
,点击 outer view
也只会触发handleTap1。
<view id="outer" bindtap="handleTap1">outer view<view id="middle" catchtap="handleTap2">middle view<view id="inner" bindtap="handleTap3">inner view</view></view>
</view>
回调函数书写和上面一样。
微信小程序学习4:小程序语法 - 事件绑定相关推荐
- 微信小程序学习5:小程序语法-事件绑定之给事件传递参数
微信小程序学习5:小程序语法-事件绑定之给事件传递参数 前面一讲是关于事件绑定的,下面对事件绑定进行补充. 在用户触发事件,比如点击按钮时,我们往往要传递一下参数用来识别是那个按钮,因为一个界面往往不 ...
- 小程序学习 - 01小程序简介+微信小程序基础
小程序简介 小程序是一个全新的.轻量级的移动端应用. 起源 在小程序出现之前的移动端开发的解决方案有: Android iOS Windows Phone - 后来退出历史舞台 移动端开发发展了一段时 ...
- 微信小程序学习-黑马商城程序(更新中~)
目录 小程序基础知识 小程序常用标签 自定义属性,可用于传参 小程序的for循环 小程序中的方法如何携带参数 小程序中常用的布局组件 view 类似于div.p,用于包裹内容 text 文本,类似于s ...
- 微信小程序(二)--- 数据绑定,事件绑定,全局配置window,tabBar,网络数据请求,request合法域名,GET,POST
目录 一.WXML模板语法 1.数据绑定 (1)Mustache语法 2.事件绑定 (1)常用事件 (2)属性列表 (3)target和currentTarget的区别 (4)bindtap语法格式 ...
- 微信小程序 radio-group(排列) 及事件绑定、点击切换样式
一.这里的测试页面是参照(小打卡的-tab页"发现")来设计的 wxml代码: <import src='../userlist/listItem.wxml' /> & ...
- 微信小程序学习笔记 ( 小程序主体学习 二 逻辑层 app.js 扩展 高级食用方法)
目录结构 上图是我建立的的微信小程序的目录结构 主体学习 逻辑层(App Service) 小程序开发框架的逻辑层由 JavaScript 编写. 逻辑层将数据进行处理后发送给视图层,同时接受视 ...
- 【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap input (十)
- 微信小程序学习——视频播放小程序
一.视图设计 (一)导航栏设计 # app.json--导航栏设置 {"pages":["pages/index/index"],"window&qu ...
- 小程序学习---开启小程序之旅(项目、配置、页面、数据绑定)
一.前沿 从这个章节开始进入实战状态,利用项目以及小demo来逐步认识小程序.主要包含以下内容 1.注册程序和页面 2.数据绑定 3.循环 4.条件 5.运算 6.模板 7.事件 8.引用 9.组件 ...
最新文章
- 直播预告 | 共识、区块链和全球一体化经济
- python爬虫编程100例_哪种Python程序员最赚钱?爬虫数据告诉你!
- java随机输出10计算题
- xgboost学习率不能大于1的原因
- 线程间通信及虚假唤醒
- containsObject 总是不含有,你会用吗
- linux执行脚本查找ip,linux 查看ip、用户、时间对应执行的命令
- 训练集山准确率高测试集上准确率很低_推荐算法改版前的AB测试
- mysql导入创建表空间_oracle创建表空间 导入数据库
- Node.js压缩与解压数据
- Spark History Server配置及其启动
- LIRe 源代码分析 4:建立索引(DocumentBuilder)[以颜色布局为例]
- 从实践应用中催生课题,通过课题研究促进应用
- 暴力破解WiFi密码
- abaqus Isight学习
- 如何关闭H3C的交换机路由器等设备上使用SFP模块时候产生的警告提示
- [rust学习笔记]错误处理
- Excel批量核实输入的银行卡号信息是否正确!
- 关于印发《2000国家大地坐标系推广使用技术指南》和《大地测量控制点坐标转换技术规程》的函
- 敲开bp神经网络之门(二,mfcc中使用,c#)
热门文章
- 开源 php微商城,iWshop: 微信开源商城,基于高性能框架Phalcon,自主开发微信Sdk, 基于腾讯Weui开发店铺页面。...
- RV1126笔记十四:吸烟行为检测及部署<一>
- javac和java版本不一致_Java和Javac版本不一致
- 一个百度员工的离职感悟
- 咬文嚼字vue系列(一)
- 微博授权第三方网站登录
- Word2003入门动画教程79:在Word中插入Excel图表
- 周立功:我的成功可以复制
- 帕金森定律[来自百度]
- 【第七章】 对JDBC的支持 之 7.4 Spring提供的其它帮助 ——跟我学spring3【私塾在线原创】