微信小程序学习九 事件系统
时间:2019-12-31
本文章向大家介绍微信小程序学习九 事件系统,主要包括微信小程序学习九 事件系统使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
事件的绑定
方法名绑定
page.js
Page({ /** * 页面的初始数据 */ data: { tap_name: "tap_0", }, //点击事件之心函数 tap_0(){ console.log("我是点击事件"); } })
page.wxml
<view bindtap="tap_0"> //直接指定方法名绑定 点击事件 </view>
动态方法名绑定
<view bindtap="{{tap_name}}"> //通过data中的数据进行事件执行函数的绑定,tap_name="tap_0"与上一种方法是同样的效果,这种方法必须使用{{}}将变量包裹,否则会识别为绑定tap_name方法 点击事件 </view>
绑定wxs中的函数
<wxs module="wxs_data"> module.exports={ tap0:function(){ console.log("我是wxs中的tap0"); } } </wxs> <view bindtap="{{wxs_data.tap0}}"> //必须使用{{}} 点击事件 </view>
传递参数
所有的小程序事件处理函数中都会接收一个事件对象,这个事件对象上有一些属性对我们很有用,会详细介绍,其余的一些属性,想要详细了解的同学可以去这里
currentTarget
当前事件的绑定元素
重要的参数有
dataset 元素上携带的 data-xx 属性值
<view bindtap="tap_0" data-key='12' data-id='12' ax="8"> 点击事件 </view>
dataset的值为
是不是所有的data-字符都消失了,只留下后面的key,id而ax属性却没有出现,是应为只有在标签上是data-xx格式的属性,才会被小程序标识为标签的携带数据
target
当前事件的触发元素,事件触发的源头元素,其属性和currentTarget一样
type
事件类型
touches
touches 是一个数组,每个元素为一个 Touch 对象(canvas 触摸事件中携带的 touches 是 CanvasTouch 数组)。 表示当前停留在屏幕上的触摸点。
detail
自定义事件所携带的数据,如表单组件的提交事件会携带用户的输入,媒体的错误事件会携带错误信息,详见组件定义中各个事件的定义。
点击事件的detail
带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。
原文地址:https://www.cnblogs.com/wrhbk/p/12122920.html
- Android Material Design之Toolbar与Palette实践
- android-async-http框架源码分析
- 使用Buck构建Android工程
- android 实现淘宝收益图的折线
- React Native入门(三)组件的Props(属性)和State(状态)
- Spring Cloud构建微服务架构:服务容错保护(Hystrix服务降级)【Dalston版】
- PNG图片压缩对比分析
- 关于M4A文件的随机访问
- (whh仅供自己参考)进行ip网络请求的步骤
- HTML中的javascript交互
- Spring Cloud构建微服务架构:分布式配置中心【Dalston版】
- [Android] Toast问题深度剖析(二)
- [Android] Toast问题深度剖析(一)
- android离线缓存技术
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- lldb 入坑指北(3) - 打印 c++ 实例的虚函数表
- 一文让你彻底搞懂`__str__`和`__repr__`?
- lldb 入坑指北(1) - 给Xcode批量添加启用&禁用断点功能
- Xcode 中的 Workspace、Project、Target 和 Scheme
- 学习Python一年,这次终于弄懂了浅拷贝和深拷贝
- 为速度而生的构建系统 - Ninja
- Python面试题:字符串连接
- Python面试突击
- 我半夜爬了严选的女性文胸数据,发现了惊天秘密
- 二分查找(Python实现)
- 图解JavaScript——代码实现【2】(重点是Promise、Async、发布/订阅原理实现)
- 编译器 bug 系列(1)
- 面试高频:反转链表
- 存储过程
- 为什么别人不想回答你提的问题?