What is HarmonyOS NEXT Universal Event?

General events are divided into the following categories: ·Event distribution: Event distribution refers to the process in which ArkUI receives touch events generated by user operations, and through touch testing, distributes the touch events to various components to form events. ·Touch screen events: Touch events are inputs for touch testing, and can be divided into Touch type touch events and Mouse type touch events based on different user operation modes. ·Keyboard and mouse events: Keyboard and mouse events refer to input events from external devices such as keyboards and mice. ·Focus event: refers to events such as focus, focus chain, and out of focus. ·Drag event: Drag event provides a mechanism for transmitting data through mouse or gesture touch screen, that is, dragging data from one component position and dropping it to another component position to trigger a response. In this process, the dragging party provides data, while the dragging party is responsible for receiving and processing the data. This operation enables users to easily move, copy, or delete specified content. Click Event .onClick(() => { // Handling click event logic }) When a finger or stylus touches a component, it triggers event responses corresponding to different actions, including Down, Move, and Up events: onTouch(event: (event?: TouchEvent) => void) ·Event. type is TouchType Down： Indicates that the finger is pressed. ·Event. type is TouchType Up： Raise the finger. ·Event. type is TouchType Move： Represents holding down and moving with fingers. ·Event. type is TouchType Cancel： Interrupt and cancel the current finger operation. Focus, Focus Chain, and Walking Focus ·Focus: Point to the only interactive element on the current application interface. When users use non directional input devices such as keyboards, TV remote controls, car joysticks/knobs to indirectly interact with the application, focus based navigation and interaction are important input methods. ·Focus Chain: In the component tree structure of an application, when a component obtains focus, all nodes along the entire path from the root node to the component node are considered to be in the focus state, forming a continuous focus chain. ·Out of focus: refers to the behavior of shifting focus between components within an application. This process is transparent to users, but developers can capture these changes by monitoring onFocus and onBlur events. Focus state: Used to point to the style of the currently focused component. ·Display rule: By default, the focus state will not be displayed. It will only be displayed when the application enters the active state. Therefore, although the component that obtains focus may not necessarily display the focus state (depending on whether it is in an active state), the component that displays the focus state is necessarily obtaining focus. Most components have built-in focus mode styles, and developers can also use style interfaces for customization. Once customized, the component will no longer display the built-in focus mode styles. In the focus chain, if multiple components simultaneously have a focus state, the system will adopt a sub component priority strategy, prioritizing the display of the focus state of each sub component and only displaying one focus state. ·Entering the active state: Only when the TAB key is pressed on the external keyboard will the focus enter the active state. After entering the active state, the TAB key/directional keys on the keyboard can be used for focusing. The TAB key used for activating the focus state for the first time will not trigger defocusing. ·Exit activation state: When the application receives a click event (including a finger touch screen press event and a left mouse button press event), the focus activation state will exit. focal event .onFocus(() => { // Logic for handling coking events }) Out of focus event .onBlur(() => { // Logic for handling out of focus events }) Bubble pop-up event .bindPopup(this.handlePopup, { message: 'This is a popup with PopupOptions', }) Code Example: 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)=>{

Mar 24, 2025 - 15:52

General events are divided into the following categories:
·Event distribution: Event distribution refers to the process in which ArkUI receives touch events generated by user operations, and through touch testing, distributes the touch events to various components to form events.
·Touch screen events: Touch events are inputs for touch testing, and can be divided into Touch type touch events and Mouse type touch events based on different user operation modes.
·Keyboard and mouse events: Keyboard and mouse events refer to input events from external devices such as keyboards and mice.
·Focus event: refers to events such as focus, focus chain, and out of focus.
·Drag event: Drag event provides a mechanism for transmitting data through mouse or gesture touch screen, that is, dragging data from one component position and dropping it to another component position to trigger a response. In this process, the dragging party provides data, while the dragging party is responsible for receiving and processing the data. This operation enables users to easily move, copy, or delete specified content.

Click Event

  .onClick(() => {
    // Handling click event logic
  })

When a finger or stylus touches a component, it triggers event responses corresponding to different actions, including Down, Move, and Up events:

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

·Event. type is TouchType Down： Indicates that the finger is pressed.
·Event. type is TouchType Up： Raise the finger.
·Event. type is TouchType Move： Represents holding down and moving with fingers.
·Event. type is TouchType Cancel： Interrupt and cancel the current finger operation.

Focus, Focus Chain, and Walking Focus
·Focus: Point to the only interactive element on the current application interface. When users use non directional input devices such as keyboards, TV remote controls, car joysticks/knobs to indirectly interact with the application, focus based navigation and interaction are important input methods.
·Focus Chain: In the component tree structure of an application, when a component obtains focus, all nodes along the entire path from the root node to the component node are considered to be in the focus state, forming a continuous focus chain.
·Out of focus: refers to the behavior of shifting focus between components within an application. This process is transparent to users, but developers can capture these changes by monitoring onFocus and onBlur events.

Focus state: Used to point to the style of the currently focused component.
·Display rule: By default, the focus state will not be displayed. It will only be displayed when the application enters the active state. Therefore, although the component that obtains focus may not necessarily display the focus state (depending on whether it is in an active state), the component that displays the focus state is necessarily obtaining focus. Most components have built-in focus mode styles, and developers can also use style interfaces for customization. Once customized, the component will no longer display the built-in focus mode styles. In the focus chain, if multiple components simultaneously have a focus state, the system will adopt a sub component priority strategy, prioritizing the display of the focus state of each sub component and only displaying one focus state.
·Entering the active state: Only when the TAB key is pressed on the external keyboard will the focus enter the active state. After entering the active state, the TAB key/directional keys on the keyboard can be used for focusing. The TAB key used for activating the focus state for the first time will not trigger defocusing.
·Exit activation state: When the application receives a click event (including a finger touch screen press event and a left mouse button press event), the focus activation state will exit.

focal event

  .onFocus(() => {
    // Logic for handling coking events
  })

Out of focus event

  .onBlur(() => {
    // Logic for handling out of focus events
  })

Bubble pop-up event

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

Code Example: 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%')
  }
}