小程序事件的介绍、事件对象、事件传值、事件冒泡和捕获

小程序在1.5版本以后,支持  bind:tap=“事件名称”  来绑定事件

catch:tap=“事件名称”    也可以用catchtap来绑定事件

还有一些几乎所有组件都有的事件:

touchstart:手指开始触摸

touchmove:手指移动

touchcancel:手指触摸被打断,比如说电话来了

touchend:手指停止触摸

tap:手指触摸后马上离开  相当于js中的click点击事件

longpress:长按  且长按事件超过350毫秒

longtap:长按 超过350毫秒再离开,一般不推荐使用,常用longpress代替

具体演练就不演示了,

 事件传值

小程序中绑定的事件 我们都注意到了,事件名称后面都没有小括号,也不能有小括号,所以不能直接在函数中传值,我们有一种方法就是,给袁术定义自定义属性,

然后用mastuch语法给自定义属性赋值,那么当元素上的事件触发后,event事件对象中就会有自定义属性的值了,变相的事件传值:

例子:

类似上面的,我们就可以在event事件对象中取到值,做一些事情了

我们在事件对象中的currentTarget中的dataset中就可以拿到事件传过来的值;

 事件捕获和冒泡

正常情况下,事件都是冒泡的(从内向外)

bindtap就是蒋婷事件的冒泡的

如果想监听事件捕获,我们需要capture-bindtap来监听事件的捕获

事件是先捕获再冒泡的

那么假如我们不想让事件来回传递,我们只想让最外层的元素接收到事件后就触发事件,不让事件继续传递,那么这时候我们就用到catch了

那么catch:事件  的作用就是阻止事件的捕获,使事件在捕获阶段就阻止,不向下传递,自然就没有了事件冒泡

这就是bind:事件和catch:事件的 区别

原文地址:https://www.cnblogs.com/fqh123/p/12333660.html

时间: 2024-08-26 19:04:31

小程序事件的介绍、事件对象、事件传值、事件冒泡和捕获的相关文章

微信小程序-06-详解介绍.js 逻辑层文件-注册页面

上一篇介绍的是 app.js 逻辑层文件中注册程序,对应的每个分页面都会有的 js 文件中 page() 函数注册页面 微信小程序-06-详解介绍.js 逻辑层文件-注册页面 宝典官方文档: https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html 今天开始深度学习编程语法,虽然大部分是拷贝官方文档,代码类都是我自己敲的,希望能自己敲一遍表格里的内容,熟悉一下操作 页面 Page Page(Object) Page(

微信小程序管理后台介绍

微信小程序的管理后台,每次进入都需要扫码,还是特别不爽,现在微信小程序还没正式发布,很多人都还没看到管理后台,这里抢先发布出来 ------------------------------------------------------------ http://www.cnblogs.com/likwo/p/6057258.html 好推小程序统计:https://weixin.hotapp.cn关键指标分析推广效果,一行代码接入微信登录 ---------------------------

微信小程序-04-详解介绍.json 配置文件

致我自己:小程序开发不是简单一两天的事,一两天只能算是了解,有时候看多了会烦,感觉很熟悉了,其实只是对表面进行了解,对编程却知之甚少,小程序开发不是简单的改模板,一两天很多部分改模板可能都做不到,坚持! 微信小程序-04-详解介绍.json 配置文件 宝典官方文档: https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html 今天开始深度学习编程语法,岁大部分是拷贝官方文档,代码类都是我自己敲的,希望能自己敲一遍表格里

微信小程序基于腾讯云对象存储的图片上传

在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到保障.所以我们在经过慎重考虑觉得使用第三方的云存储服务. 在最开始的时候我们在腾讯云与阿里云中选择,最终我们选择腾讯云,腾讯云在文件上传用时方面的性能比较突出,文件越大表现越好:在下载用时方面表现略优于阿里云:文件删除用时方面总体速度略逊于,但在不同大小文件删除用时上都比较稳定.当然这与我们主要用于

小程序中父子组件间的通信与事件

点此查看微信小程序官方文档 以下示例,可自行体会.. 子 - Component  child.json { "component": true, "usingComponents": {} } child.wxml <view class='template-child'> <block wx:for='{{dataFromParent}}'> <button data-id='{{item.id}}' bindtap='onTapC

小程序常用API介绍

小程序常用API接口 ? wx.request https网络请求 wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 method:"GET", data: { x: '' , y: '' }, header: { 'content-type': 'application/json' }, success: function(res) { console.log(res.data) } }) ? 本地缓存 ? 通过key的形式添加缓存setS

小程序 - 音频能力介绍(四)

小程序支持播放和录制音频.小程序播放音频的方式有两种:内部音频和背景音频.1.内部音频支持用户在使用小程序过程中播放音效;2.背景音频支持在用户离开小程序后继续播放音效. BackgroundAudioManager wx.getBackgroundAudioManager() 获取全局唯一的背景音频管理器. 小程序切入后台,如果音频处于播放状态,可以继续播放.但是后台状态不能通过调用API操纵音频的播放状态. 从微信客户端6.7.2版本开始,若需要在小程序切后台后继续播放音频,需要在 app.

Vue+koa2开发一款全栈小程序(1.课程介绍+2.ES6入门)

1.课程介绍 1.课程概述 1.做什么? Vue+koa2开发一款全栈小程序 2.哪些功能? 个人中心.图书列表.图书详情.图书评论.个人评论列表 3.技术栈 小程序.Vue.js.koa2.koa-router.mysql 2.课程亮点 1.项目前后端分离开发 Vue+koa2开发一款全栈小程序 2.完整流程,一步不少 注册小程序账号,前后端开发,打包,正式上线 2.小程序环境搭建 1.后台地址: https://mp.weixin.qq.com/ 2.文档地址: https://develo

小程序自定义多选按钮 给后台传值方法

小程序自定义多选按钮 1.html部分 <checkbox-group bindchange="checkboxChange" class = "flex"> <label class="checkbox {{item.checked?'active':''}}" wx:for="{{items}}" bindtap="addclass" data-index="{{index}

微信小程序合并两个json对象

a = [ {"id":"1"}, {"id":"2"} ] b = [ {"id":"3"}, {"id":"4"} ] a = a.concat(b) 结果: a = [ {"id":"1"}, {"id":"2"}, {"id":"3