一、onChange 事件

1. onChange 功能

onChange 是表单类控件专用监听事件，核心功能是监听组件内部值、选中状态、输入内容发生真实变更，只有控件数据发生改变时才会触发回调函数。 不会单纯响应点击动作，仅在数据变更时执行；回调可直接拿到变更后的最新数据，适合做输入校验、状态切换、内容同步业务。 适用控件：TextInput 输入框、Toggle 开关、Swiper 轮播、Checkbox 复选框、Select 下拉框等带状态 / 输入的表单组件。

2. onChange 核心属性 / 参数

1. 回调参数value：控件变更后最新值，文本框为字符串、开关为布尔值、滑块为数字；
2. 绑定对象：仅支持具备可修改状态的表单组件；
3. 联动响应：搭配@State装饰变量，数据变更自动刷新页面 UI；
4. 触发逻辑：手动修改控件状态、代码修改绑定变量，均会触发 onChange 回调。

3. onChange 基础使用示例

@Entry
@Component
struct InputDemo{
  @State content:string=""
  build(){
    Column(){
      TextInput({text:this.content,placeholder:"请输入文字"})
        .width('100%')
        .height(50)
        .onChange((value:string)=>{
          this.content = value
        })
      Text(this.content)
    }
  }
}

4. onChange 实战完整案例

@Entry
@Component
struct ToggleDemo{
  @State isOpen:boolean = true
  build() {
    Column(){
      Row({space:10}){
        Toggle({
          type:ToggleType.Switch,
          isOn:this.isOpen
        })
          .width(150)
          .height(50)
          .onChange(() => {
            this.isOpen = !this.isOpen
          })

        Text(this.isOpen?"夜览模式已开启":"夜览模式已关闭")
          .fontSize(25)
          .fontColor(Color.Gray)
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor(this.isOpen?Color.Black:Color.White)
  }
}

案例效果说明

1. Toggle 开关状态发生改变（开启 / 关闭切换）时触发 onChange；
2. 修改isOpen布尔变量，页面背景、提示文字同步切换黑白主题；
3. 仅滑动开关改变状态才触发，单纯点击空白区域不会执行回调。

二、onClick 事件

1. onClick 功能

onClick 是通用点击监听事件，核心功能是监听用户单击组件的动作，只要点击到组件可视区域就会触发回调函数，不关心组件内部值、状态是否发生变化。 全组件通用，无控件限制，不管是按钮、文字、布局容器、图片、表单控件都能绑定；适合弹窗唤起、页面路由跳转、开关状态手动取反等点击交互场景。

2. onClick 核心属性 / 参数

1. 无内置回调参数，如需获取组件数据，直接读取页面定义的@State变量；
2. 绑定对象：所有 ArkUI 组件（Button、Text、Column、Toggle、Swiper 等全部支持）；
3. 触发逻辑：只要鼠标 / 手指单击组件区域就执行，哪怕点击后组件状态无任何变化；
4. 联动响应：修改@State变量后，页面自动刷新对应 UI 内容。

3. onClick 基础使用示例

@Entry
@Component
struct ButtonDemo{
  @State tip:string="初始文字"
  build(){
    Column(){
      Text(this.tip).fontSize(30)
      Button("点击修改文字")
        .width('100%')
        .height(50)
        .onClick(()=>{
          this.tip = "点击后的文字"
        })
    }
  }
}

4. onClick 实战完整案例

import router from '@ohos.router';
@Entry
@Component
struct Logins{
  @State username:string = ""
  build() {
    Column({space:30}){
      Text("欢迎登录")
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      TextInput({text:this.username,placeholder:"请输入账号"})
        .type(InputType.Normal)
        .width('100%')
        .height(50)
        .borderRadius(10)
        .onChange((value:string)=>{
          this.username = value
        })

      TextInput({placeholder:"请输入密码"})
        .type(InputType.Password)
        .width('100%')
        .height(50)
        .borderRadius(10)

      Row(){
        Toggle({
          type: ToggleType.Checkbox,
          isOn: true
        })

        Text("记住密码")
          .fontSize(18)
      }

      Button("登录")
        .width('100%')
        .height(50)
        .fontSize(20)
        .onClick(() => {
          if (this.username=="root") {
            router.pushUrl({
              url:'pages/ShouYe'
            })
          }else {
            AlertDialog.show({
              title:"登录失败",
              message:`用户名或者密码错误,${this.username}`
            })
          }


        })

      Text("没有账号？立即注册")
        .fontSize(14)
        .fontColor(0x1677ff)
        .onClick(() => {
          router.pushUrl({
            url:'pages/Registers'
          })
        })

    }
    .width('100%')
    .height('100%')
    .padding(20)
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

案例效果说明

1. 登录按钮绑定 onClick，点击后校验输入框账号，正确则路由跳转首页，错误弹出 AlertDialog 弹窗；
2. 注册文字绑定 onClick，点击直接跳转到注册页面；
3. 只要点击组件区域就执行代码，无论输入框内容是否修改、开关状态是否变化。

三、相同点，不同点以及使用区分

• 相同点：二者均为ArkUI组件链式事件，可修改@State变量驱动UI刷新，回调内可写弹窗、路由等逻辑。
• 不同点：onChange仅表单控件可用，值改变触发，携带新值参数；onClick全组件通用，点击即触发，无内置参数。
• 使用区分：监听输入、开关状态变化用onChange；按钮、文字点击跳转、弹窗交互统一用onClick。