事件

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

主要扩展了事件的绑定：加强了符合vue语法的事件绑定；

事件绑定

主要增强了可以通过 v-on @这种形式去绑定事件；

  1. <view v-on:click="handleClick " @tap="handleTap"></view>
  1. <template lang='vue'>
  2. <view id="tapTest"  @tap="tapName" v-on:click="handleClick"> <text>Click me!</text> </view>
  3. </template>
  4. <script>
  5. class Index {
  6.   data = {}
  7.   methods = {
  8.     tapName() {
  9.       console.log(e);
  10.     }
  11.   }
  12. }
  13. export default new Index();
  14. </script>

事件类型

事件类型列表：

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

事件对象

当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。chameleon将事件绑定做了一层代理，将各平台的事件对象做统一，统一后的事件对象有如下属性：

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

target && currentTarget

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

dataset

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

  1. <view data-alpha-beta="1" data-alphaBeta="2" c-bind:tap="bindViewTap"> DataSet Test </view>
  2. <script>
  3. class Index {
  4.   methods = {
  5.     bindViewTap:function(event){
  6.       event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
  7.       event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  8.     }
  9.   }
  10. }
  11. export default new Index();
  12. </script>

changedTouches 事件属性

数组中的对象有如下属性：

属性类型说明
identifierNumber触摸点的标识符
pageXpageYNumber距离文档左上角的距离，文档的左上角为原点，横向为X轴，纵向为Y轴
clientXclientYNumber距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴

自定义事件

自定义事件用于父子组件之间的通信，父组件给子组件绑定自定义事件，子组件内部触发该事件。规定事件名称不能存在大写字母触发事件的方法是调用this.$cmlEmit(事件名称,detail对象)。

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

例如：子组件 yyl-com

  1. <template>
  2.  <view @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.   <yyl-com c-bind:customevent="customEventHandler">
  3.   </yyl-com>
  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>

当点击yyl-com组件的按钮时，父组件中的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 + 的版本 支持了事件冒泡和阻止事件冒泡

vue语法下仅仅扩展了 .stop;

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

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

Bug & Tips

不支持的语法

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

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