微信小程序 --- 事件绑定
事件类别:
tap:点击事件;
longtap:长按事件;
touchstart:触摸开始;
touchend:触摸结束;
touchcansce:取消触摸;
事件绑定:
bind绑定;
catch绑定;(能阻止事件冒泡)
例如:绑定点击事件 bindtap
page.wxml 文件
<button bindtap="btnclick"></button>
page.js 文件
//获取应用实例
const app = getApp()
Page({
data: {
text: "你好",
onOff: false
},
btnclick:function(){
console.log('123');
var onOff = this.data.onOff;
this.setData({text:"hello",onOff:!onOff});
}
})
事件详解:(类型 type ; 时间戳 timeStamp;事件源组件 target ; 当前事件 currentTarget ; 触摸点数 touches)
例如:打印一个点击事件

显示:

currentTarget:是我们点击的这个 view;
target:是我们目标的这个 view;
可以给这个 view 加一个 id:

效果:

在冒泡的事件中: currentTarget 和 target是不一致的; currentTarget是我们绑定了的组件,target是发生事件的组件;
currentTarget里面的 dataset是没有数据的。这个是为了方便我们添加我们自定义的属性:

可以看到:

通过点击事件,可以获取到这个空间的属性,从而可以方便我们的逻辑。
这个会很实用;
调用项目下的其他事件及调用app.js里面的事件:
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
text: '按钮',
},
btnclick:function(){
var that = this;
console.log('不错');
that.btnchange(); //调用项目的其他事件
app.clickBtn(); //调用app.js里面的事件
},
btnchange:function(){
console.log('yes');
}
})
微信小程序 --- 事件绑定的更多相关文章
- 微信小程序 事件绑定 bind和catch 区别
转自:https://blog.csdn.net/xiaoqiang_0719/article/details/79729592 本文以冒泡事件tap(手指触摸后马上离开,也就是点击事件)为例子来区别 ...
- 微信小程序事件绑定
一 通过实例来认识 (一) 给出代码 我们直接通过一个实例来引入我们想要讲解的内容: <input type="text" bindinput="handleInp ...
- 微信小程序~事件绑定和冒泡
[1]事件绑定和冒泡 事件绑定的写法同组件的属性,以 key.value 的形式. key 以bind或catch开头,然后跟上事件的类型,如bindtap.catchtouchstart.自基础库版 ...
- 微信小程序事件
微信小程序事件1.什么是事件2.事件类别3.事件冒泡4.事件绑定5.事件对象详解笔记:1.事件是一种用户的行为,是一种通讯方式.2.事件类别: 点击事件:tap 长按事件:longtap ...
- 微信小程序——事件冒泡
在微信小程序的事件分为冒泡事件和非冒泡事件: 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递. 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递. WXML的冒泡事件列表: ...
- 微信小程序のwxml绑定
一.微信小程序文件的构成 微信小程序包括js文件.json文件.wxml文件.wxss文件.wxs文件.js文件是展现界面的,注册这个程序的的页面,一般一个大写的Page({ })嵌入: json文件 ...
- 微信小程序事件始末及相关资料整理
转载请注明来源:前端之巅 微信公众号 小道消息 昨晚(9月21日晚)10:51,冯大辉在他的知名微信公众号小道消息上发了一篇7字标题的文章<微信应用号来了>,并加了"微信是一个操 ...
- 微信小程序——获取绑定事件元素的ID
小程序list数据带值跳转,一般直接通过设置item的id来标识或者通过设置键值data-xxxx的方式标识.如下图所示: 解析出来的结果如下图: 我们看到它在元素上绑定了一个checkSchoolL ...
- 微信小程序双向绑定
欢迎加入前端交流群交流知识获取视频资料:749539640 vue.angular的双向绑定如下示例: <div> <input type="text" [(ng ...
随机推荐
- SBT树
转自:http://jcf94.com/2015/06/19/2015-06-19-sbt/ 总结: 二叉查找树(或称二叉搜索树.二叉排序树):大的右边.小的左边.问题:不平衡,输入有序情况下从平均性 ...
- CSS编写指导规范和建议
在参与规模庞大.历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要: 保持 CSS 易于维护 保持代码清晰易懂 保持 CSS 的可拓展性 为了实现这一目标,我们要采用诸多方法. 本文档第一 ...
- 'cl.exe' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
1.首先找到vcvars32.bat文件,一般在C:\\Program Files (x86)\\Microsoft Visual Studio 12.0\\VC\\bin文件夹下 2.打开cmd黑窗 ...
- selenium测试(Java)--操作cookie(十七)
package com.test.cookies; import org.openqa.selenium.Cookie; import org.openqa.selenium.JavascriptEx ...
- Zookeeper 基础
在深入了解ZooKeeper的运作之前,让我们来看看ZooKeeper的基本概念.我们将在本章中讨论以下主题:1.Architecture(架构)2.Hierarchical namespace(层次 ...
- Eclipse最经常使用快捷键总结
1. ctrl+shift+r:打开资源 这可能是全部快捷键组合中最省时间的了. 这组快捷键能够让你打开你的工作区中不论什么一个文件,而你仅仅须要按下文件名称或mask名中的前几个字母,比方appl ...
- 【Java面试题】7 构造器Constructor是否可被override?
构造器Constructor不能被继承,因此不能重写Override,但可以被重载Overload. Constructor不能被继承,所以Constructor也就不能被override.每一个类必 ...
- 抽象工厂模式(abstract factory pattern)------创造型模式
创建型模式:抽象工厂模式 引入概念: 1.产品等级结构:当抽象的产品由具体的工厂生产出不同的产品时,这些归属与同一类的抽象产品就构成了产品等级结构: 2.产品族:具体的工厂可以生产出来的不同产品就构成 ...
- 【转】理清基本的git(github)流程
概述 当我初次接触git时,我需要快速学习基本的git工作流,以便快速接收一个开源Web项目维护.但是,我很难理解工作流程,因为我不太了解git使用关键点. fork,clone,pull.branc ...
- mysql通过mysql_install_db初始化数据目录时使用--user选项的作用是什么?
需求描述: mysql数据库通过mysql_install_db初始化数据目录时,使用了--user选项,这里记录下该参数的作用 参数解释: 1.--user的作用:就是以哪个操作系统用户来执行mys ...