十三、组件-通用属性-点击事件

组件是构建页面的核心，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。

@Entry
@Component
struct Click {
  @State text: string = ''

  build() {

    Column(){
      Row({space:20}){
        Button('click',{type:ButtonType.Normal}).width(100).height(50)
          .onClick((event:ClickEvent) => {
            this.text = 'Click Point:' + '\n screenX:' + event.screenX + '\n screenY:' + event.screenY
            + '\n x:' + event.x + '\n y:' + event.y + '\n target:' + '\n width:' + event.target.area.width
            + '\n height:' + event.target.area.height + '\n timestamp:' + event.timestamp
          })
        Button('click',{type:ButtonType.Normal}).width(200).height(50)
          .onClick((event:ClickEvent) => {
            this.text = 'Click Point:' + '\n screenX:' + event.screenX + '\n screenY:' + event.screenY
            + '\n x:' + event.x + '\n y:' + event.y + '\n target:' + '\n width:' + event.target.area.width
            + '\n height:' + event.target.area.height + '\n timestamp:' + event.timestamp
          }).margin({top:0})
      }.margin(0)

      Text(this.text).fontSize(20)
    }.width('100%').alignItems(HorizontalAlign.Start)
  }
}