事件系统标准
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 事件属性
属性 | 类型 | 说明 |
---|---|---|
id | String | 事件源组件的id |
dataset | Object | 事件源组件上由`data-`开头的自定义属性组成的集合 |
touches && changedTouches 事件属性
数组中的对象具有如下属性:
属性 | 类型 | 说明 |
---|---|---|
identifier | Number | 触摸点的标识符 |
pageX, pageY | Number | 距离文档左上角的距离,文档的左上角为原点 ,横向为X轴,纵向为Y轴 |
clientX, clientY | Number | 距离页面可显示区域(屏幕除去导航条)左上角距离,横向为X轴,纵向为Y轴 |
自定义事件标准
自定义事件用于父子组件之间的通信,父组件给子组件绑定自定义事件,子组件内部触发该事件。绑定事件的方法是以bind+事件名称="事件处理函数
的形式给组件添加属性,规定事件名称不能存在大写字母触发事件的方法是调用this.$cmlEmit(事件名称,detail对象)
。