鴻蒙OS 事件

事件主要包括手勢(shì)事件和按鍵事件。手勢(shì)事件主要用于智能穿戴等具有觸摸屏的設(shè)備，按鍵事件主要用于智慧屏設(shè)備。

手勢(shì)事件

手勢(shì)表示由單個(gè)或多個(gè)事件識(shí)別的語(yǔ)義動(dòng)作（例如：點(diǎn)擊、拖動(dòng)和長(zhǎng)按）。一個(gè)完整的手勢(shì)也可能由多個(gè)事件組成，對(duì)應(yīng)手勢(shì)的生命周期。JS UI 框架支持的手勢(shì)事件有：

觸摸

• touchstart：手指觸摸動(dòng)作開始。
• touchmove：手指觸摸后移動(dòng)。
• touchcancel：手指觸摸動(dòng)作被打斷，如來(lái)電提醒、彈窗。
• touchend：手指觸摸動(dòng)作結(jié)束。

點(diǎn)擊

click：用戶快速輕敲屏幕。

長(zhǎng)按

longpress：用戶在相同位置長(zhǎng)時(shí)間保持與屏幕接觸。

具體的使用示例如下：

<!-- 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';
  },
}

按鍵事件

按鍵事件是智慧屏上特有的手勢(shì)事件，當(dāng)用戶操作遙控器按鍵時(shí)觸發(fā)。用戶點(diǎn)擊一個(gè)遙控器按鍵，通常會(huì)觸發(fā)兩次 key 事件：先觸發(fā) action 為 0，再觸發(fā) action 為 1，即先觸發(fā)按下事件，再觸發(fā)抬起事件。action 為 2 的場(chǎng)景比較少見，一般為用戶按下按鍵且不松開，此時(shí) repeatCount 將返回次數(shù)。每個(gè)物理按鍵對(duì)應(yīng)各自的按鍵值（keycode）以實(shí)現(xiàn)不同的功能，常用的按鍵值請(qǐng)參考組件通用事件。具體的使用示例如下：

<!-- 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';
  },
}

按鍵事件通過獲焦事件向下分發(fā)，因此示例中使用了 focus 事件和 blur 事件明確當(dāng)前焦點(diǎn)的位置。點(diǎn)按上下鍵選中 up 或 down 按鍵，即相應(yīng)的 focused 狀態(tài)，失去焦點(diǎn)的按鍵恢復(fù)正常的 up 或 down 按鍵文本。按確認(rèn)鍵后該按鍵變?yōu)?keyed 狀態(tài)。