事件系统标准

Chameleon 支持一些基础的原生事件和自定义事件,保障各端效果一致运行。

  • 事件是视图层到逻辑层的通讯方式。
  • 事件可以将用户的行为反馈到逻辑层进行处理。
  • 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。

原生事件标准

当用户点击该组件的时候会在该组件逻辑vm对象methods中寻找相应的处理函数,该处理函数会收到一个事件对象。

原生基础事件的类型

类型 触发条件
tap 手指触摸后马上离开
touchstart 手指触摸动作开始
touchmove 手指触摸后移动
touchend 手指触摸动作结束

原生事件对象

它有以下属性:

名称 类型 说明
type String 事件类型
timeStamp Number 页面打开到触发事件所经过的毫秒数
target Object 触发事件的目标元素 且 target = { id, dataset }
currentTarget Object 绑定事件的目标元素 且 currentTarget = { id, dataset }
touches Array 触摸事件中的属性,当前停留在屏幕中的触摸点信息的数组 且 touches = [{ identifier, pageX, pageY, clientX, clientY }]
changedTouches Array 触摸事件中的属性,当前变化的触摸点信息的数组 且 changedTouches = [{ identifier, pageX, pageY, clientX, clientY }]
detail Object 自定义事件所携带的数据。 通过`$cmlEmit`方法触发自定义事件,可以传递自定义数据即detail。具体下面`自定义事件`。
_originEvent Object chameleon对各平台的事件对象进行统一,会把原始的事件对象放到_originEvent属性中,当需要特殊处理的可以进行访问。

target && currentTarget 事件属性

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

touches && changedTouches 事件属性

数组中的对象具有如下属性:

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

自定义事件标准

自定义事件用于父子组件之间的通信,父组件给子组件绑定自定义事件,子组件内部触发该事件。绑定事件的方法是以bind+事件名称="事件处理函数的形式给组件添加属性,规定事件名称不能存在大写字母触发事件的方法是调用this.$cmlEmit(事件名称,detail对象)

results matching ""

    No results matching ""