【微信小程序】框架wxml(五)wxml事件

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Crab0314/article/details/78301487

1.事件定义

· 事件是视图层到逻辑层的通讯方式。

· 事件可以将用户的行为反馈到逻辑层进行处理。

· 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。

· 事件对象可以携带额外信息,如id,dataset,touches。


2.举例事件的使用方法。

(1)首先在wxml的组件中为button绑定一个事件处理函数

<button id="button0" bindtap="wannaMore" data-hello='hello world' data-index="0">跳转到更多示例</button>
(2)在js文件中定义wannaMore函数

Page({
  wannaMore:function(event){
    console.log(event)
  }
})
(3)在控制台查看输出信息,可以看到data-hello和data-index都在dataset进行展示,且省略了data-字段。



3.事件分类

绑定事件处理函数可以由“catch”或“bind”连接事件类型,两者之间的区别是catch会阻止事件向上冒泡,bind不会阻止事件向上冒泡。绑定后在page中定义同名函数,否则会报错。

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

类型触发条件最低版本
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 动画完成时触发

(2)非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。(除了上述说明的事件类型为冒泡时间外,其余均为非冒泡事件)。


(3)demo

①wxml中三个view组件 outer到inner依次包裹

<view id="outer" bindtap="handtap">
  outer view
  <view id="middle" catchtap="handtap">
    middle view
    <view id="inner" bindtap="handtap">
      inner view
    </view>
  </view>
</view>
②在js中定义handtap方法。(在该例中三个view都绑定了同一函数,可以绑定三个不同的函数)

Page({
  handtap:function(message){
    console.log(message.currentTarget.id + " is clicked!")
  }
})
③点击inner view,查看控制台输出,冒泡事件到middle view后没有继续向上冒泡。




4.事件对象

一般来说,组件触发事件时,逻辑层(js文件中)绑定该事件的处理函数会收到一个事件对象。

(1)BaseEvent基础事件对象属性列表

属性类型说明
typeString事件类型
timeStampInteger事件生成时的时间戳
targetObject触发事件的组件的一些属性值集合
currentTargetObject当前组件的一些属性值集合
①type代表事件的类型,详见3(1)

②timeStamp从该page打开到触发该事件所经过的毫秒数。

③target 触发事件的源组件。(其中:dataset在组件中可以定义数据,这些数据将会通过事件传递给 SERVICE。 书写方式: 以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在 event.currentTarget.dataset 中会将连字符转成elementType


属性类型说明
idString事件源组件的id
tagNameString当前组件的类型
datasetObject事件源组件上由data-开头的自定义属性组成的集合

④currentTarget事件绑定的当前组件

属性类型说明
idString当前组件的id
tagNameString当前组件的类型
datasetObject当前组件上由data-开头的自定义属性组成的集合

(2)CustomEvent自定义事件对象属性列表(继承自BaseEvent)

属性类型说明
detailObject额外的信息
(3)TouchEvent触摸事件对象属性列表(继承自BaseEvent)

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

属性类型说明
identifierNumber触摸点的标识符
pageX, pageYNumber距离文档左上角的距离,文档的左上角为原点 ,横向为X轴,纵向为Y轴
clientX, clientYNumber距离页面可显示区域(屏幕除去导航条)左上角距离,横向为X轴,纵向为Y轴

(4)特殊事件 ,cavans组件中的触摸事件不可冒泡,所以没有currentTarget属性

CanvasTouch 对象

属性类型说明特殊说明
identifierNumber触摸点的标识符 
x, yNumber距离 Canvas 左上角的距离,Canvas 的左上角为原点 ,横向为X轴,纵向为Y轴


阅读更多
换一批

没有更多推荐了,返回首页