事件系统标准
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对象)。
