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.