树叶云鸿蒙OS教程：鸿蒙OS 事件

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

手势事件

手势表示由单个或多个事件识别的语义动作（例如：点击、拖动和长按）。一个完整的手势也可能由多个事件组成，对应手势的生命周期。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 {
  padding-top: 10px;
  flex-direction: column;
}
.text-style {
  padding-top: 20px;
  padding-left: 100px;
  width: 750px;
  height: 100px;
  text-align: center;
  font-size: 50px;
  color: #ffffff;
  background-color: #09ba07;
}

// xxx.js
export default {
  data: {
    textData: '',
    touchStart: 'touchstart',
    touchMove: 'touchmove',
    touchEnd: 'touchend',
    touchCancel: 'touchcancel',
    onClick: 'onclick',
    onLongPress: 'onlongpress',
  },
  onInit() {
    this.textData = 'initdata';
  },
  onReady: function () {},
  onShow: function () {},
  onHide: function () {},
  onDestroy: function () {},
  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.js
export 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 状态。