本篇内容：ArkTS开发系列之事件（2.8.1触屏、键鼠、焦点事件）

上篇回顾： ArkTS开发系列之导航 (2.7动画）

本篇内容：ArkTS开发系列之事件（2.8.1触屏、键鼠、焦点事件）

一、知识储备

1. 触屏事件：包括点击事件、拖拽事件、触摸事件。

• 点击事件

Button()....onClick(()=>{})

• 拖拽事件：是指手指/手写笔长按组件（>=500ms），并拖拽到接收区域释放的事件

 .onDragEnter((event, params) => {console.error('onDragEnter event: ' + JSON.stringify(event))console.error('onDragEnter params: ' + JSON.stringify(params))}).onDragLeave((event, params) => {console.error('onDragLeave event: ' + JSON.stringify(event))console.error('onDragLeave params: ' + JSON.stringify(params))}).onDragMove((event, params) => {console.error('onDragMove event: ' + JSON.stringify(event))console.error('onDragMove params: ' + JSON.stringify(params))}).onDrop((event: DragEvent, params: string) => {console.error('onDrop event: ' + JSON.stringify(event))console.error('onDrop params: ' + JSON.stringify(params))this.color = Color.Yellow;})

• 触摸事件：包括按下（down）、滑动（move）和抬起（up）

  .onTouch((event: TouchEvent)=>{if (event.type == TouchType.Down) {console.error("down: " + event.touches[0].x + " " + event.touches[0].y)console.error("down: " + event.touches[0].screenX + " " + event.touches[0].screenY)}if (event.type == TouchType.Move) {console.error("Move: " + event.touches[0].x + " " + event.touches[0].y)console.error("Move: " + event.touches[0].screenX + " " + event.touches[0].screenY)}if (event.type == TouchType.Up) {console.error("Up: " + event.touches[0].x + " " + event.touches[0].y)console.error("Up: " + event.touches[0].screenX + " " + event.touches[0].screenY)}})

2. 键鼠事件&按键事件

• 键鼠事件

.onHover((event: boolean) => {if (event) {this.msg = '鼠标在玩具之上'} else {this.msg = '鼠标离开了玩具'}console.error(this.msg)})

.onMouse((event: MouseEvent)=>{this.msg = '鼠标点击了我'console.error(this.msg)console.error(JSON.stringify(event))})

.hoverEffect(HoverEffect.Scale)

• 按键事件

   .onKeyEvent((event: KeyEvent)=>{if (event.type == KeyType.Down) {}if (event.type == KeyType.Up) {}this.msg = event.keyText})

3. 焦点

• 获得焦点回调

       .onFocus(() => {this.focusMsg = '获取焦点'})

• 失去焦点回调

       .onBlur(() => {this.focusMsg = '失去焦点'})

• 设置组件是否可以获得焦点
  • button、checkBox、textInput此类组件 默认可获得焦点
  • text 、image此类组件默认无法获得组件，可设置focusable为true来获得焦点能力
  • blank、circle此类组件则无论如何设置都无法具有获取焦点的能力

      .focusable(true)//

• 自定义某个组件默认获得焦点

.defaultFocus(true)

• 点击获取焦点

.focusOnTouch(true)

二、效果一览

三、源码剖析