微信小程序开发系列-06事件

2023-12-28 22:37:03

什么是事件

  • 事件是视图层到逻辑层的通讯方式。
  • 事件可以将用户的行为反馈到逻辑层进行处理。
  • 事件可以绑定在组件上,当达到触发条件时,就会执行逻辑层中对应的事件处理函数。
  • 事件对象可以携带额外信息,如 id, dataset, touches。

事件分类

事件分为冒泡事件和非冒泡事件:

  1. 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
  2. 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

WXML的冒泡事件列表:

类型触发条件最低版本
touchstart手指触摸动作开始
touchmove手指触摸后移动
touchcancel手指触摸动作被打断,如来电提醒,弹窗
touchend手指触摸动作结束
tap手指触摸后马上离开
longpress手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发1.5.0
longtap手指触摸后,超过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事件,(详见各个组件)

后面举例看看冒泡事件和非冒泡事件具体是怎样的形式。

事件对象

当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。事件对象有三种:基础事件对象、触摸事件对象、自定义事件对象。

BaseEvent 基础事件对象

属性列表

属性类型说明基础库版本
typeString事件类型
timeStampInteger事件生成时的时间戳, 页面打开到触发事件所经过的毫秒数.
targetObject触发事件的组件的一些属性值集合
currentTargetObject当前组件的一些属性值集合
markObject事件标记数据2.7.1

CustomEvent 自定义事件对象(继承BaseEvent)

属性类型说明
detailObject额外的信息

TouchEvent 触摸事件对象(继承BaseEvent)

属性类型说明
touchesArray触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouchesArray触摸事件,当前变化的触摸点信息的数组

事件的使用方式

普通事件绑定

请添加图片描述

自基础库版本 1.5.0 起,在大多数组件和自定义组件中, bind 后可以紧跟一个冒号,其含义不变,如 bind:tap 。基础库版本 2.8.1 起,在所有组件中开始提供这个支持。

间接事件绑定

事件绑定函数可以是一个数据绑定,通过这种间接的方式来绑定实际的事件处理函数。此时,页面的 this.data.handlerName 必须是一个字符串,指定事件处理函数名;如果它是个空字符串,则这个绑定会失效(可以利用这个特性来暂时禁用一些事件)

请添加图片描述

冒泡事件

bind

本例子定义了三个view:outer、middle、inner且层层嵌套。然后分别bind 3个函数:outerTap、middleTap、innerTap。当我点击“inner view”时,分别打印三个函数的event对象。

请添加图片描述

catch

如果想要阻止事件冒泡,可以使用catch来绑定事件, catch 会阻止事件向上冒泡。

请添加图片描述

上例中,点击“inner view”后,事件只冒泡到middle view后,就不再想上传递了。

互斥事件

自基础库版本 2.8.2 起,除 bindcatch 外,还可以使用 mut-bind 来绑定事件。一个 mut-bind 触发后,如果事件冒泡到其他节点上,其他节点上的 mut-bind 绑定函数不会被触发,但 bind 绑定函数和 catch 绑定函数依旧会被触发。

所有 mut-bind 是“互斥”的,只会有其中一个绑定函数被触发。同时,它完全不影响 bindcatch 的绑定效果。

请添加图片描述

上例中,点击“inner view”,只有middle和inner被触发了。outer没被触发是因为被middle的catch阻止了。exMut没被触发是因为mut-bind互斥。

请添加图片描述

请添加图片描述

事件阶段

事件支持两种阶段,冒泡和捕获。自基础库版本 1.5.0 起,触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前,且在捕获阶段中,事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时,可以采用capture-bindcapture-catch关键字,后者将中断捕获阶段和取消冒泡阶段。

请添加图片描述

上例中,点击inner view后,事件的触发顺序依次为touchstart2、touchstart4、 touchstart6、 touchstart5 、touchstart3、 touchstart1。

文章来源:https://blog.csdn.net/weixin_43708622/article/details/135278896
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。