事件类别

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');
}
})

微信小程序 --- 事件绑定的更多相关文章

  1. 微信小程序 事件绑定 bind和catch 区别

    转自:https://blog.csdn.net/xiaoqiang_0719/article/details/79729592 本文以冒泡事件tap(手指触摸后马上离开,也就是点击事件)为例子来区别 ...

  2. 微信小程序事件绑定

    一 通过实例来认识 (一) 给出代码 我们直接通过一个实例来引入我们想要讲解的内容: <input type="text" bindinput="handleInp ...

  3. 微信小程序~事件绑定和冒泡

    [1]事件绑定和冒泡 事件绑定的写法同组件的属性,以 key.value 的形式. key 以bind或catch开头,然后跟上事件的类型,如bindtap.catchtouchstart.自基础库版 ...

  4. 微信小程序事件

    微信小程序事件1.什么是事件2.事件类别3.事件冒泡4.事件绑定5.事件对象详解笔记:1.事件是一种用户的行为,是一种通讯方式.2.事件类别:    点击事件:tap    长按事件:longtap  ...

  5. 微信小程序——事件冒泡

    在微信小程序的事件分为冒泡事件和非冒泡事件: 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递. 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递. WXML的冒泡事件列表: ...

  6. 微信小程序のwxml绑定

    一.微信小程序文件的构成 微信小程序包括js文件.json文件.wxml文件.wxss文件.wxs文件.js文件是展现界面的,注册这个程序的的页面,一般一个大写的Page({ })嵌入: json文件 ...

  7. 微信小程序事件始末及相关资料整理

    转载请注明来源:前端之巅 微信公众号 小道消息 昨晚(9月21日晚)10:51,冯大辉在他的知名微信公众号小道消息上发了一篇7字标题的文章<微信应用号来了>,并加了"微信是一个操 ...

  8. 微信小程序——获取绑定事件元素的ID

    小程序list数据带值跳转,一般直接通过设置item的id来标识或者通过设置键值data-xxxx的方式标识.如下图所示: 解析出来的结果如下图: 我们看到它在元素上绑定了一个checkSchoolL ...

  9. 微信小程序双向绑定

    欢迎加入前端交流群交流知识获取视频资料:749539640 vue.angular的双向绑定如下示例: <div> <input type="text" [(ng ...

随机推荐

  1. opencv3.2 dnn 图像分割

    下载 http://dl.caffe.berkeleyvision.org/fcn32s-heavy-pascal.caffemodel 在opencv_contrib-3.2.0/modules/d ...

  2. AOP称为面向切面编程,在程序开发中主要用来解决一些系统层面上的问题

    AOP称为面向切面编程,在程序开发中主要用来解决一些系统层面上的问题,比如日志,事务,权限等待,Struts2的拦截器设计就是基于AOP的思想,是个比较经典的例子. 一 AOP的基本概念 (1)Asp ...

  3. AMD和RequireJS初识----优化Web应用前端(按需动态加载JS)

    RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量.它还同时可以和其他的框架协同工作,使用Re ...

  4. Linux 获取登录者IP

    在linux中有时须要获得登录者的IP,这里有两种方法.先使用who am i 获取登录IP,然后截取字符串: 1.awk截取,sed替换 who am i | awk '{print $5}' | ...

  5. 基于Linux的智能家居的设计(4)

    3  开发环境的搭建 本次课题使用的开发环境比較特殊.没有一个现成的集成开发环境,需要自己一步一步的搭建开发环境,开发环境的搭建的过程十分复杂,并且假设没有这个开发环境本次课题就无法进行. 因此.在进 ...

  6. R read.table函数的check.names参数

    今天用cummeRbund 对cuffdiff的结果进行可视化, 一直报错,之前跑的好好的,找了半天原因, 原来出现在read.table这个函数上: read.table有一个参数check.nam ...

  7. 基于swoole扩展实现真正的PHP数据库连接池

    转自:  http://rango.swoole.com/archives/265 PHP的数据库连接池一直以来都是一个难题,很多从PHP语言转向Java的项目,大多数原因都是因为Java有更好的连接 ...

  8. php将汉字转换为拼音和得到词语首字母(三)

    <?php function getfirstchar($s0){ $fchar = ord($s0{0}); if($fchar >= ord("A") and $f ...

  9. 查看 SharePoint 2013 部署到GAC的自定义dll

    在SharePoint 2007和2010中,自定义dll存放在“C:\Windows\assembly\”文件夹中,在Windows资源管理器中可以看到. 但在Sharepoint 2013中,却无 ...

  10. oracle数据备份

    from:http://www.docin.com/p-728428621.html