本篇内容：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)

二、效果一览

三、源码剖析