事件

Chameleon 支持一些基础的事件，保障各端效果一致运行。如果你想要使用某个端特定的事件，请从业务出发使用 组件多态或者接口多态差异化实现功能。

什么是事件

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

事件绑定

当用户点击该组件的时候会在该组件逻辑对象的methods中寻找相应的处理函数

  1. <template>
  2.   <view id="tapTest" data-hi="WeChat" c-bind:tap="tapName">
  3.     <text>Click me!</text>
  4.   </view>
  5. </template>
  6. <script>
  7. class Index {
  8.   methods = {
  9.     tapName(e) {
  10.       // 打印事件对象
  11.       console.log('事件对象:', e);
  12.     }
  13.   }
  14. }
  15. export default new Index();
  16. </script>

事件类型

chameleon所有元素都支持基础事件类型如下：

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

事件对象

当触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。它有以下属性：

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

target && currentTarget 事件属性

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

**dataset在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。 书写方式： 以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。示例：html<view data-alpha-beta="1" data-alphabeta="2" c-bind:tap="bindViewTap"> DataSet Test </view>### touches && changedTouches 事件属性数组中的对象具有如下属性：
属性类型说明
identifierNumber触摸点的标识符
pageX, pageYNumber距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴
clientX, clientYNumber距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴

自定义事件

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

注意：自定义事件名称不支持click、scroll

例如：子组件 child

  1. <template>
  2.  <view c-bind:tap="triggerCustomEvent"><text>触发自定义事件</text></view>
  3. </template>
  4. <script>
  5. class Index {
  6.   data: {}
  7.   method: {
  8.     triggerCustomEvent(e) {
  9.       this.$cmlEmit('customevent', {
  10.         company: 'didi',
  11.         age: 18
  12.       })
  13.     }
  14.   }
  15. }
  16. export default new Index();
  17. <script>

父组件

  1. <template>
  2.   <child c-bind:customevent="customEventHandler">
  3.   </child>
  4. </template>
  5. <script>
  6. class Index {
  7.   data = {}
  8.   method = {
  9.     customEventHandler(e) {
  10.       console.log(e)
  11.     }
  12.   }
  13. }
  14. export default new Index();
  15. <script>

当点击child组件的按钮时，父组件中的customEventHandler方法中打印的e对象如下：

  1. {
  2.   type: "customevent",
  3.   detail: {
  4.     company: "didi",
  5.     age: 18
  6.   }
  7. }

支持的语法

事件绑定支持以下几种形式（在内联语句中，$event代表事件对象）

  1. <!-- 写法(1) -->
  2. <view c-bind:tap="handleElementTap" ><text>触发元素点击事件</text></view>
  3. <!-- 写法(2) -->
  4. <view c-bind:tap="handleElementTap(1,2,3, 'message'+msg ,  $event)" ><text>触发元素点击事件（1,2,3）</text></view>
  5. <!-- 写法(3) -->
  6. <view c-bind:tap="handleElementTap()" ><text>触发元素点击事件（）</text></view>

针对以上写法返回的事件对象如下：

写法(1)调用事件函数输出如下

  1. 'handleElementTap'  [e]

写法(2)调用事件函数输出如下

  1. 'handleElementTap'  [1,2,3,'messagetestEvent',e]

写法(3)调用事件函数输出如下

  1. 'handleElementTap'  []

事件冒泡

chameleon-tool@0.2.0 + 的版本 支持了事件冒泡和阻止事件冒泡

注意：对于阻止事件冒泡，在内联事件传参的情况下，需要传递 $event参数；

  1. <!-- 不会阻止冒泡 -->
  2. <view c-catch:click="handleElementTap(1,2)" ><text>触发元素点击事件</text></view>
  3. <!-- 会阻止冒泡 -->
  4. <view c-catch:click="handleElementTap(1,2,$event)" ><text>触发元素点击事件</text></view>
  1. <template  >
  2.   <view class="root">   
  4.     <view class="pad">
  5.       cml语法事件冒泡测试
  6.     </view>
  7.     <view c-bind:click="rootClick">
  8.       <text style="font-size: 40px;">{{rootText}}</text>
  9.       <view class="outer" c-catch:click="parentClick">
  10.         <view>
  11.           <text style="font-size: 40px;">{{parentText}}</text>
  12.         </view>
  13.         <text class="inner" c-bind:click="click">{{innerText}}</text>
  14.       </view>
  15.     </view>
  16.   </view>
  17. </template>
  19. <script>
  20. class Index  {
  21.   methods = {
  22.     click: function(e) {
  23.       this.innerText = 'inner bubble'
  24.       console.log('this.innerText',this.innerText)
  26.     },
  27.     parentClick: function(e) {
  28.       this.parentText = 'parent bubble'
  29.       console.log('this.parentClick',this.parentClick)
  30.     },
  31.     rootClick: function(e) {
  32.       this.rootText = 'root bubble'
  33.       console.log('this.rootClick',this.rootClick)
  34.     },
  35.   }
  36. }
  38. export default new Index();
  40. </script>

其他事件说明

事件绑定的写法同组件的属性，以 key、value 的形式。key 以c-bind，然后跟上事件的类型，如c-bind:tap、c-bind:touchstart。value 是一个字符串，需要在对应的逻辑对象中声明的methods中声明该方法。

Bug & Tips

不支持的语法注意，事件绑定不支持直接传入一个表达式，和绑定多个内联执行函数比如

  1. <div c-bind:tap="count++"></div>
  2. <div c-bind:tap="handleTap1(); handleTap2()"></div>

**