[Hongmeng Software Development] ArkTS general events

Article directory

  • Preface
  • 1. Click event
    • 1.1 Basic introduction
    • 1.2 ClickEvent object description
    • 1.3 Sample code
  • 2. Touch event
    • 2.1 Basic introduction
    • 2.2 ClickEvent object description
    • 2.3 Sample code
  • 2. Focus events
    • 2.2 Basic introduction
    • 3.2 Sample code
  • Summarize

Foreword

There are some common events in our ArkTS that are available in all components, so we need to learn about them.
Get better development experience and efficiency! ! !

1. Click event

1.1 Basic introduction

Event triggered when the component is clicked.

Name Support bubbling Function description
onClick(event: (event?: ClickEvent) => void) No Click action triggers this callback. See the ClickEvent object description for the event return value. Starting from API version 9, this interface supports use in ArkTS cards.

1.2 ClickEvent Object Description

Name Type Description
screenX number The X coordinate of the click position relative to the upper left corner of the application window.
screenY number The Y coordinate of the click position relative to the upper left corner of the application window.
x number The X coordinate of the click position relative to the upper left corner of the clicked element.
y number The Y coordinate of the click position relative to the upper left corner of the clicked element.
timestamp number
Event timestamp. The time interval between when the event is triggered and when the system starts, in nanoseconds.
target EventTarget The element object that triggers the event is displayed area.
source SourceType Event input device.

1.3 Sample code

// xxx.ets
@Entry
@Component
struct ClickExample {<!-- -->
  @State text: string = ''

  build() {<!-- -->
    Column() {<!-- -->
      Row({<!-- --> space: 20 }) {<!-- -->
        Button('Click').width(100).height(40)
          .onClick((event: ClickEvent) => {<!-- -->
            this.text = 'Click Point:' + '\\
 screenX:' + event.screenX + '\\
 screenY:' + event.screenY
             + '\\
 x:' + event.x + '\\
 y:' + event.y + '\\
target:' + '\\
 component globalPos:('
             + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\\
 width:'
             + event.target.area.width + '\\
 height:' + event.target.area.height + '\\
timestamp' + event.timestamp;
          })
        Button('Click').width(200).height(50)
          .onClick((event: ClickEvent) => {<!-- -->
            this.text = 'Click Point:' + '\\
 screenX:' + event.screenX + '\\
 screenY:' + event.screenY
             + '\\
 x:' + event.x + '\\
 y:' + event.y + '\\
target:' + '\\
 component globalPos:('
             + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\\
 width:'
             + event.target.area.width + '\\
 height:' + event.target.area.height + '\\
timestamp' + event.timestamp;
          })
      }.margin(20)

      Text(this.text).margin(15)
    }.width('100%')
  }
}

2. Touch event

2.1 Basic introduction

Event triggered when the component is clicked.

Name Support bubbling Function description
onTouch(event: (event?: TouchEvent) => void) Yes The finger touch action triggers this callback. For the event return value, see the introduction of TouchEvent.

2.2 ClickEvent Object Description

Name Type Description
type TouchType The type of touch event.
touches Array All finger information.
changedTouches Array Currently changed finger information.
stopPropagation () => void Blocking event bubbling.
timestamp number
Event timestamp. The time interval between when the event is triggered and when the system starts, in nanoseconds.
target EventTarget The element object that triggers the event is displayed area.
source SourceType Event input device.

2.3 Sample code

// xxx.ets
@Entry
@Component
struct TouchExample {<!-- -->
  @State text: string = ''
  @State eventType: string = ''

  build() {<!-- -->
    Column() {<!-- -->
      Button('Touch').height(40).width(100)
        .onTouch((event: TouchEvent) => {<!-- -->
          if (event.type === TouchType.Down) {<!-- -->
            this.eventType = 'Down'
          }
          if (event.type === TouchType.Up) {<!-- -->
            this.eventType = 'Up'
          }
          if (event.type === TouchType.Move) {<!-- -->
            this.eventType = 'Move'
          }
          this.text = 'TouchType:' + this.eventType + '\\
Distance between touch point and touch element:\\
x: '
           + event.touches[0].x + '\\
' + 'y: ' + event.touches[0].y + '\\
Component globalPos:('
           + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\\
width:'
           + event.target.area.width + '\\
height:' + event.target.area.height
        })
      Button('Touch').height(50).width(200).margin(20)
        .onTouch((event: TouchEvent) => {<!-- -->
          if (event.type === TouchType.Down) {<!-- -->
            this.eventType = 'Down'
          }
          if (event.type === TouchType.Up) {<!-- -->
            this.eventType = 'Up'
          }
          if (event.type === TouchType.Move) {<!-- -->
            this.eventType = 'Move'
          }
          this.text = 'TouchType:' + this.eventType + '\\
Distance between touch point and touch element:\\
x: '
           + event.touches[0].x + '\\
' + 'y: ' + event.touches[0].y + '\\
Component globalPos:('
           + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\\
width:'
           + event.target.area.width + '\\
height:' + event.target.area.height
        })
      Text(this.text)
    }.width('100%').padding(30)
  }
}

2. Focus event

2.2 Basic introduction

Focus events refer to events that are triggered when the page focus moves between focusable components. Components can use focus events to process related logic.

Name Support bubbling Function description
onFocus(event: () => void) No Callback triggered when the current component obtains focus.
onBlur(event:() => void) No Callback triggered when the current component loses focus.

3.2 Sample code

// xxx.ets
@Entry
@Component
struct FocusEventExample {<!-- -->
  @State oneButtonColor: string = '#FFC0CB'
  @State twoButtonColor: string = '#87CEFA'
  @State threeButtonColor: string = '#90EE90'

  build() {<!-- -->
    Column({<!-- --> space: 20 }) {<!-- -->
      // Use the up and down keys of the external keyboard to move the focus between the three buttons. The color of the button changes when it is in focus, and returns to the original background color when it is out of focus.
      Button('First Button')
        .backgroundColor(this.oneButtonColor)
        .width(260)
        .height(70)
        .fontColor(Color.Black)
        .focusable(true)
        .onFocus(() => {<!-- -->
          this.oneButtonColor = '#FF0000'
        })
        .onBlur(() => {<!-- -->
          this.oneButtonColor = '#FFC0CB'
        })
      Button('Second Button')
        .backgroundColor(this.twoButtonColor)
        .width(260)
        .height(70)
        .fontColor(Color.Black)
        .focusable(true)
        .onFocus(() => {<!-- -->
          this.twoButtonColor = '#FF0000'
        })
        .onBlur(() => {<!-- -->
          this.twoButtonColor = '#87CEFA'
        })
      Button('Third Button')
        .backgroundColor(this.threeButtonColor)
        .width(260)
        .height(70)
        .fontColor(Color.Black)
        .focusable(true)
        .onFocus(() => {<!-- -->
          this.threeButtonColor = '#FF0000'
        })
        .onBlur(() => {<!-- -->
          this.threeButtonColor = '#90EE90'
        })
    }.width('100%').margin({<!-- --> top: 20 })
  }
}

Summary

The above is what I will talk about today. This article only briefly introduces click, touch, and focus events. ArkTS also provides other functions. If you are interested, you can read the official documentation by yourself.