事件

事件主要为手势事件和按键事件。手势事件主要用于智能穿戴等具有触摸屏的设备，按键事件主要用于智慧屏设备。

手势事件

手势表示由单个或多个事件识别的语义动作（例如：点击、拖动和长按）。一个完整的手势也可能由多个事件组成，对应手势的生命周期。JS UI框架支持的手势事件有：

触摸

• touchstart：手指触摸动作开始。
• touchmove：手指触摸后移动。
• touchcancel：手指触摸动作被打断，如来电提醒、弹窗。
• touchend：手指触摸动作结束。

点击

click：用户快速轻敲屏幕。

长按

longpress：用户在相同位置长时间保持与屏幕接触。

具体的使用示例如下：

<!-- xxx.hml --><div class="container">  <div class="text-container" onclick="click">    <text class="text-style">{{onClick}}</text>  </div>  <div class="text-container" ontouchstart="touchStart">    <text class="text-style">{{touchstart}}</text>  </div>  <div class="text-container" ontouchmove="touchMove">    <text class="text-style">{{touchmove}}</text>  </div>  <div class="text-container" ontouchend="touchEnd">    <text class="text-style">{{touchend}}</text>  </div>  <div class="text-container" ontouchcancel="touchCancel">    <text class="text-style">{{touchcancel}}</text>  </div>  <div class="text-container" onlongpress="longPress">    <text class="text-style">{{onLongPress}}</text>  </div></div>
/* xxx.css */.container {  flex-direction: column;  justify-content: center;  align-items: center;}.text-container {  margin-top: 10px;  flex-direction: column;  width: 750px;  height: 50px;  background-color: #09ba07;}.text-style {  width: 100%;  line-height: 50px;  text-align: center;  font-size: 24px;  color: #ffffff;}
// xxx.jsexport default {  data: {    touchstart: 'touchstart',    touchmove: 'touchmove',    touchend: 'touchend',    touchcancel: 'touchcancel',    onClick: 'onclick',    onLongPress: 'onlongpress',  },  touchCancel: function (event) {    this.touchcancel = 'canceled';  },  touchEnd: function(event) {    this.touchend = 'ended';  },  touchMove: function(event) {    this.touchmove = 'moved';  },   touchStart: function(event) {    this.touchstart = 'touched';  },  longPress: function() {    this.onLongPress = 'longpressed';  },  click: function() {    this.onClick = 'clicked';  },}

按键事件

按键事件是智慧屏上特有的手势事件，当用户操作遥控器按键时触发。用户点击一个遥控器按键，通常会触发两次key事件：先触发action为0，再触发action为1，即先触发按下事件，再触发抬起事件。action为2的场景比较少见，一般为用户按下按键且不松开，此时repeatCount将返回次数。每个物理按键对应各自的按键值（keycode）以实现不同的功能，常用的按键值请参考组件通用事件。具体的使用示例如下：

<!-- xxx.hml --><div class="card-box">  <div class="content-box">    <text class="content-text" onkey="keyUp" onfocus="focusUp" onblur="blurUp">{{up}}</text>  </div>  <div class="content-box">    <text class="content-text" onkey="keyDown" onfocus="focusDown" onblur="blurDown">{{down}}</text>  </div></div>
/* xxx.css */.card-box {  flex-direction: column;  justify-content: center;}.content-box {  align-items: center;  height: 200px;  flex-direction: column;  margin-left: 200px;  margin-right: 200px;}.content-text {  font-size: 40px;  text-align: center;}
// xxx.jsexport default {  data: {    up: 'up',    down: 'down',  },  focusUp: function() {    this.up = 'up focused';  },  blurUp: function() {    this.up = 'up';  },  keyUp: function() {    this.up = 'up keyed';  },  focusDown: function() {    this.down = 'down focused';  },  blurDown: function() {    this.down = 'down';  },  keyDown: function() {    this.down = 'down keyed';  },}

按键事件通过获焦事件向下分发，因此示例中使用了focus事件和blur事件明确当前焦点的位置。点按上下键选中up或down按键，即相应的focused状态，失去焦点的按键恢复正常的up或down按键文本。按确认键后该按键变为keyed状态。