HarmonyOS NEXT 通用事件

Question

通用事件分为以下几类：

事件分发：事件分发是指ArkUI收到用户操作生成的触控事件，通过触摸测试，将触控事件分发至各个组件形成事件的过程。
触屏事件：触控事件是触摸测试的输入，根据用户操作方式的不同，可以划分为Touch类触控事件和Mouse类触控事件。
键鼠事件：键鼠事件指键盘，鼠标外接设备的输入事件。
焦点事件：是指焦点、焦点链和走焦等事件。
拖拽事件：拖拽事件提供了一种通过鼠标或手势触屏传递数据的机制，即从一个组件位置拖出（drag）数据并将其拖入（drop）到另一个组件位置，以触发响应。在这一过程中，拖出方提供数据，而拖入方负责接收和处理数据。这一操作使用户能够便捷地移动、复制或删除指定内容。

点击事件

  .onClick(() => {
    // 处理点击事件逻辑
  })

当手指或手写笔在组件上触碰时，会触发不同动作所对应的事件响应，包括按下（Down）、滑动（Move）、抬起（Up）事件：

onTouch(event: (event?: TouchEvent) => void)

event.type为TouchType.Down：表示手指按下。
event.type为TouchType.Up：表示手指抬起。
event.type为TouchType.Move：表示手指按住移动。
event.type为TouchType.Cancel：表示打断取消当前手指操作。

焦点、焦点链和走焦

焦点：指向当前应用界面上唯一的一个可交互元素，当用户使用键盘、电视遥控器、车机摇杆/旋钮等非指向性输入设备与应用程序进行间接交互时，基于焦点的导航和交互是重要的输入手段。
焦点链：在应用的组件树形结构中，当一个组件获得焦点时，从根节点到该组件节点的整条路径上的所有节点都会被视为处于焦点状态，形成一条连续的焦点链。
走焦：指焦点在应用内的组件之间转移的行为。这一过程对用户是透明的，但开发者可以通过监听onFocus（焦点获取）和onBlur（焦点失去）事件来捕捉这些变化。

焦点态：用来指向当前获焦组件的样式。

显示规则：默认情况下焦点态不会显示，只有当应用进入激活态后，焦点态才会显示。因此，虽然获得焦点的组件不一定显示焦点态（取决于是否处于激活态），但显示焦点态的组件必然是获得焦点的。大部分组件内置了焦点态样式，开发者同样可以使用样式接口进行自定义，一旦自定义，组件将不再显示内置的焦点态样式。在焦点链中，若多个组件同时拥有焦点态，系统将采用子组件优先的策略，优先显示子组件的焦点态，并且仅显示一个焦点态。
进入激活态：仅使用外接键盘按下TAB键时才会进入焦点的激活态，进入激活态后，才可以使用键盘TAB键/方向键进行走焦。首次用来激活焦点态的TAB键不会触发走焦。
退出激活态：当应用收到点击事件时（包括手指触屏的按下事件和鼠标左键的按下事件），焦点的激活态会退出。

获焦事件

  .onFocus(() => {
    // 处理获焦事件逻辑
  })

失焦事件

  .onBlur(() => {
    // 处理失焦事件逻辑
  })

气泡弹窗事件

  .bindPopup(this.handlePopup, {
    message: 'This is a popup with PopupOptions',
  })

代码实例：UniversalEvents

@Entry
@Component
struct UniversalEvents {
  @State message: string = 'UniversalEvents ';
  @State count:number=0;
  @State eventMessage:string="Events Message";
  @State phone:string='';
  @State handlePopup:boolean=false;

  build() {
    Column({space:10}) {
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      Text(`click time: ${this.count}`).onClick(()=>{
        this.count=this.count+1
      })

      TextInput({placeholder:'Focus Event'})
        .onFocus(()=>{
          this.eventMessage="I do focus event---"
        })
        .onBlur(()=>{
          this.eventMessage="I do lost focus event***"
        })
      Text(this.eventMessage)

      TextInput({placeholder:'please input phone'})
        .type(InputType.Number)
        .onChange((value:string)=>{
          this.phone=value
        })
        .onFocus(()=>{
          this.handlePopup=false;
        })
        .onBlur(()=>{
          if(this.phone==''){
            //Tell the user that the phone number cannot be empty
            this.handlePopup=true;
          }
        })
        .bindPopup(this.handlePopup,{
          message:"Mobile number cannot be empty"
        })
    }
    .height('100%')
    .width('100%')
  }
}