做网站优化两年遇到的SEO常态,网站建设中数据库的维护论文,靖江网站开发,深圳住房建设局网站申报前言
哈喽大家好#xff0c;我是 SuperYing#xff0c;本文是小程序从入门到入坑系列的第 3 篇#xff0c;将比较详尽的讲解 小程序事件系统 的相关知识点#xff0c;欢迎小伙伴阅读。 读完本文您将收获#xff1a; 了解小程序事件及基础使用。了解小程序事件分类及多种的…前言
哈喽大家好我是 SuperYing本文是小程序从入门到入坑系列的第 3 篇将比较详尽的讲解 小程序事件系统 的相关知识点欢迎小伙伴阅读。 读完本文您将收获 了解小程序事件及基础使用。了解小程序事件分类及多种的绑定方式。了解如何使用 wxs 绑定事件响应函数。 什么是事件 借用官网的描述 事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上当达到触发事件就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息如 id, dataset, touches。 事件 可以完成从 视图层 到 逻辑层 的通信通过特定的参数处理方式实现对于用户行为的逻辑处理。
事件绑定
事件分类
小程序事件分为
冒泡事件当一个组件上的事件被触发后该事件会向父节点传递。非冒泡事件当一个组件上的事件被触发后该事件不会向父节点传递。
WXML 的冒泡事件列表
类型触发条件最低版本touchstart手指触摸动作开始touchmove手指触摸后移动touchcancel手指触摸动作被打断如来电提醒弹窗touchend手指触摸动作结束tap手指触摸后马上离开longpress手指触摸后超过350ms再离开如果指定了事件回调函数并触发了这个事件tap事件将不被触发1.5.0longtap手指触摸后超过350ms再离开推荐使用longpress事件代替transitionend会在 WXSS transition 或 wx.createAnimation 动画结束后触发animationstart会在一个 WXSS animation 动画开始时触发animationiteration会在一个 WXSS animation 一次迭代结束时触发animationend会在一个 WXSS animation 动画完成时触发touchforcechange在支持 3D Touch 的 iPhone 设备重按时会触发1.9.90 注除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件如 form 的submit事件input 的input事件scroll-view 的scroll事件(详见各个组件) 普通事件绑定
事件绑定的写法类似于组件的属性在 bind:(冒号 : 可省略) 后面加上事件名称
bind:[事件名称][事件绑定函数名称]
事件绑定函数名称 是一个字符串指向在 .ts/.js 文件的 Page 函数中定义的处理函数名。
eg:
view bind:taphandleTap点击区域/view事件绑定函数名称也可以是数据绑定但是绑定的变量必须是一个字符串指向事件处理函数名。若该变量为空字符串则绑定会失效可以该特性来暂时禁用某些事件。
view bind:tap{{ tapHandlerName }}点击区域/viewPage({data: {tapHandlerName: handleTap},handleTap() {// tap 事件处理逻辑...}
})阻止事件冒泡绑定
除了使用 bind 绑定事件还可以使用 catch 绑定。两者区别在于 catch 会事件向上冒泡。
在 「事件分类」part 我们知道小程序事件有一种冒泡事件此类事件触发后会向父节点传递。
eg:
view idouter bind:taphandleTap1outer viewview idmiddle catch:taphandleTap2middle viewview idinner bind:taphandleTap3inner view/view/view
/view上例中点击 inner view 会先后调用 handleTap3 和 handleTap2这是因为 tap 事件会冒泡到 middle view而 middle view 阻止了 tap 事件冒泡不再向父节点传递.点击 middle view 会触发 handleTap2点击 outer view 会触发 handleTap1。
互斥事件绑定
除了 bind 和 catch 外还可以使用 mut-bind 来绑定互斥事件所有 mut-bind 绑定都是互斥的只会触发其中一个绑定函数但是不会影响bind 和 catch 绑定的事件。
也就是说触发 mut-bind 绑定的事件后如果事件冒泡到父级节点上在父级节点上使用 mut-bind 绑定的事件不会被触发而使用 bind 和 catch 绑定的事件可以正常触发。
eg:
view idouter mut-bind:taphandleTap1outer viewview idmiddle bindtaphandleTap2middle viewview idinner mut-bind:taphandleTap3inner view/view/view
/view上例中点击 inner view 会先后调用 handleTap3 和 handleTap2因为 handleTap3 和 handleTap1 绑定的事件互斥所以冒泡到 outer 时不会触发 handleTap1。点击 middle view 会调用 handleTap2 和 handleTap1。
事件捕获阶段绑定
小程序的触摸类事件支持捕获阶段。捕获阶段发生在冒泡事件之前事件到达节点的顺序与冒泡阶段恰好相反。
对于 DOM 事件比较了解的小伙伴应该比较清楚支持捕获阶段的事件触发流程如下 可以通过 capture-bind 和 capture-catch 来在捕获阶段绑定事件其中 capture-catch 会中断捕获阶段并取消冒泡阶段。
view idouter bind:touchstarthandleTap1 capture-bind:touchstarthandleTap2outer viewview idinner bind:touchstarthandleTap3 capture-bind:touchstarthandleTap4inner view/view
/view上例中点击 inner view 会先后调用 handleTap2、handleTap4、handleTap3、handleTap1。
若将上例中的 capture-bind:touchstarthandleTap2 改为 capture-catch:touchstarthandleTap2将会仅触发 handleTap2。
eg:
view idouter bind:touchstarthandleTap1 capture-catch:touchstarthandleTap2outer viewview idinner bind:touchstarthandleTap3 capture-bind:touchstarthandleTap4inner view/view
/viewwxs 绑定响应函数
在上一篇 框架语法 中我们有提到小程序的脚本语言 wxs。我们可以在 wxs 中创建事件处理参数绑定到指定事件上注意仅能响应内置组件的事件不支持自定义事件。
使用 wxs 绑定响应函数主要是用来优化频繁交互的场景将事件响应放到视图层避免视图层与逻辑层频繁通信导致交互过程的延迟。
wxs 的事件处理函数包括两个参数
event: 事件对象在 小程序事件对象 的基础上多了一个 instance 属性用来表示触发事件结构的 ComponentDescriptor 实例。ownerInstance: 触发事件的组件所在的组件的 ComponentDescriptor 实例如果触发事件的组件在页面内ownerInstance 表示的是页面实例。 ComponentDescriptor 是小程序内部封装的类包括 selectComponent, selectAllComponents, setStyle, addClass/removeClass/hasClass, callMethod 等实例方法可用于获取页面组件实例设置组件样式与逻辑层交互等功能。 eg:
// index.wxml
wxs moduletools src./tools.wxs/wxs
view idtapTest data-hi微信小程序 bindtap{{tools.tapName}} Click me! /view// tools.wxs
function tapName(event, ownerInstance) {console.log(tap 事件, JSON.stringify(event))
}
module.exports {tapName: tapName
}结语
好啦今天我们整体性的讲述了 小程序事件系统 相关的内容。相信读到这里的小伙伴已经对 小程序事件系统 有了比较清晰的了解爱动手的小伙伴们快去动起来吧。
若有疑问欢迎评论区。感谢阅读愿你我共同进步谢谢
