鍵鼠事件是指在計算機操作中，用戶通過鍵盤和鼠標(biāo)來與計算機進(jìn)行交互的行為。常見的鍵鼠事件包括按下鍵盤上的鍵、移動鼠標(biāo)、點擊鼠標(biāo)左鍵或右鍵等等。鍵鼠事件可以觸發(fā)許多不同的操作，比如在文本編輯器中輸入文字、在游戲中移動角色、在網(wǎng)頁上點擊鏈接等等。計算機操作系統(tǒng)和應(yīng)用程序可以通過監(jiān)聽鍵鼠事件來響應(yīng)用戶的操作，并進(jìn)行相應(yīng)的處理。

鼠標(biāo)事件

onHover

onHover是鼠標(biāo)事件的一種，指的是鼠標(biāo)懸停在某個元素上時觸發(fā)的事件。當(dāng)鼠標(biāo)懸停在一個元素上時，可以通過onHover事件來執(zhí)行一些特定的操作，比如顯示提示信息、改變元素樣式等。

onHover(event: (isHover?: boolean) => void)

案例：

// xxx.ets
@Entry
@Component
struct MouseExample {
  @State isHovered: boolean = false;

  build() {
    Column() {
      Button(this.isHovered ? 'Hovered!' : 'Not Hover')
        .width(200).height(100)
        .backgroundColor(this.isHovered ? Color.Green : Color.Gray)
        .onHover((isHover: boolean) => { // 使用onHover接口監(jiān)聽鼠標(biāo)是否懸浮在Button組件上
          this.isHovered = isHover;
        })
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

好像本地模擬器，預(yù)覽，遠(yuǎn)程真機都沒效果

onMouse

onMouse是一種在鼠標(biāo)與頁面的交互過程中出現(xiàn)的操作事件。它通常作為一種觸發(fā)函數(shù)，當(dāng)用戶在頁面上使用鼠標(biāo)進(jìn)行某種操作時，就會觸發(fā)相應(yīng)的事件，然后執(zhí)行相應(yīng)的操作。onMouse事件可以用于捕捉鼠標(biāo)的各種操作，例如鼠標(biāo)點擊、鼠標(biāo)移動、鼠標(biāo)滾動、鼠標(biāo)懸停等。

onMouse(event: (event?: MouseEvent) => void)

案例：

// xxx.ets
@Entry
@Component
struct MouseExample {
  @State isHovered: boolean = false;
  @State buttonText: string = '';
  @State columnText: string = '';

  build() {
    Column() {
      Button(this.isHovered ? 'Hovered!' : 'Not Hover')
        .width(200)
        .height(100)
        .backgroundColor(this.isHovered ? Color.Green : Color.Gray)
        .onHover((isHover: boolean) => {
          this.isHovered = isHover
        })
        .onMouse((event: MouseEvent) => {    // 給Button組件設(shè)置onMouse回調(diào)
          this.buttonText = 'Button onMouse:\n' + '' +
          'button = ' + event.button + '\n' +
          'action = ' + event.action + '\n' +
          'x,y = (' + event.x + ',' + event.y + ')' + '\n' +
          'screenXY=(' + event.screenX + ',' + event.screenY + ')';
        })
      Divider()
      Text(this.buttonText).fontColor(Color.Green)
      Divider()
      Text(this.columnText).fontColor(Color.Red)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .borderWidth(2)
    .borderColor(Color.Red)
    .onMouse((event: MouseEvent) => {    // 給Column組件設(shè)置onMouse回調(diào)
      this.columnText = 'Column onMouse:\n' + '' +
      'button = ' + event.button + '\n' +
      'action = ' + event.action + '\n' +
      'x,y = (' + event.x + ',' + event.y + ')' + '\n' +
      'screenXY=(' + event.screenX + ',' + event.screenY + ')';
    })
  }
}

好像也沒效果

事件冒泡是一種事件傳播機制，指的是當(dāng)一個元素觸發(fā)了某個事件時，該事件會從觸發(fā)元素開始向上層元素逐級傳播，直到最頂層的元素為止。在事件冒泡的過程中，父級元素會逐級接收該事件，并可以選擇是否處理該事件。

具體來說，當(dāng)一個元素觸發(fā)了某個事件時（比如鼠標(biāo)點擊、按鍵按下等），會先執(zhí)行觸發(fā)元素上綁定的事件處理函數(shù)，然后事件會向上級元素傳播，逐級執(zhí)行上級元素上綁定的事件處理函數(shù)，直到達(dá)到文檔頂層的根元素或者事件被停止傳播為止。

事件冒泡的好處在于它可以讓事件的處理更加靈活。通過將事件處理程序綁定在祖先元素上，可以實現(xiàn)對后代元素的事件統(tǒng)一管理。比如，當(dāng)頁面中有多個按鈕時，可以通過將點擊事件處理程序綁定在父元素上，來處理所有按鈕的點擊事件，避免了為每個按鈕都綁定事件處理函數(shù)的繁瑣。

事件冒泡有時也可能會帶來一些問題。當(dāng)多個元素重疊時，事件觸發(fā)后會逐級向上冒泡，導(dǎo)致多個元素都接收到了該事件，可能會產(chǎn)生意外的行為。在這種情況下，可以通過使用事件的stopPropagation()方法來阻止事件繼續(xù)傳播，或者使用事件的target屬性來判斷事件源，從而實現(xiàn)精確控制事件的處理。

event.stopPropagation()可以阻止事件冒泡

Button(this.isHovered ? 'Hovered!' : 'Not Hover')
  .width(200)
  .height(100)
  .backgroundColor(this.isHovered ? Color.Green : Color.Gray)
  .onHover((isHover: boolean) => {
    this.isHovered = isHover;
  })
  .onMouse((event: MouseEvent) => {
    event.stopPropagation(); // 在Button的onMouse事件中設(shè)置阻止冒泡
    this.buttonText = 'Button onMouse:\n' + '' +
    'button = ' + event.button + '\n' +
    'action = ' + event.action + '\n' +
    'x,y = (' + event.x + ',' + event.y + ')' + '\n' +
    'screenXY=(' + event.screenX + ',' + event.screenY + ')';
  })

hoverEffect

hover effect是指當(dāng)鼠標(biāo)懸停在一個元素上時，觸發(fā)特定的效果。

hoverEffect(value: HoverEffect)

// xxx.ets
@Entry
@Component
struct HoverExample {
  build() {
    Column({ space: 10 }) {
      Button('Auto')
        .width(170).height(70)
      Button('Scale')
        .width(170).height(70)
        .hoverEffect(HoverEffect.Scale)
      Button('Highlight')
        .width(170).height(70)
        .hoverEffect(HoverEffect.Highlight)
      Button('None')
        .width(170).height(70)
        .hoverEffect(HoverEffect.None)
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

按鍵事件

onKeyEvent

onKeyEvent是一個在編程中常見的事件處理函數(shù)，用于處理按鍵事件。當(dāng)用戶按下或釋放一個按鍵時，系統(tǒng)會生成一個按鍵事件，然后通過調(diào)用onKeyEvent函數(shù)來處理這個事件。

在onKeyEvent函數(shù)中，可以根據(jù)發(fā)生的按鍵事件類型，采取相應(yīng)的處理邏輯。比如，可以判斷按下的按鍵是哪個鍵，然后執(zhí)行相應(yīng)的操作。常見的操作包括：移動游戲角色、打開菜單、執(zhí)行特定的動作等等。

onKeyEvent(event: (event?: KeyEvent) => void)

案例：

// xxx.ets
@Entry
@Component
struct KeyEventExample {
  @State buttonText: string = '';
  @State buttonType: string = '';
  @State columnText: string = '';
  @State columnType: string = '';

  build() {
    Column() {
      Button('onKeyEvent')
        .width(140).height(70)
        .onKeyEvent((event: KeyEvent) => { // 給Button設(shè)置onKeyEvent事件
          if (event.type === KeyType.Down) {
            this.buttonType = 'Down';
          }
          if (event.type === KeyType.Up) {
            this.buttonType = 'Up';
          }
          this.buttonText = 'Button: \n' +
          'KeyType:' + this.buttonType + '\n' +
          'KeyCode:' + event.keyCode + '\n' +
          'KeyText:' + event.keyText;
        })

      Divider()
      Text(this.buttonText).fontColor(Color.Green)

      Divider()
      Text(this.columnText).fontColor(Color.Red)
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
    .onKeyEvent((event: KeyEvent) => { // 給父組件Column設(shè)置onKeyEvent事件
      if (event.type === KeyType.Down) {
        this.columnType = 'Down';
      } 
      if (event.type === KeyType.Up) {
        this.columnType = 'Up';
      }
      this.columnText = 'Column: \n' +
      'KeyType:' + this.buttonType + '\n' +
      'KeyCode:' + event.keyCode + '\n' +
      'KeyText:' + event.keyText;
    })
  }
}

寫在最后

• 如果你覺得這篇內(nèi)容對你還蠻有幫助，我想邀請你幫我三個小忙：
• 點贊，轉(zhuǎn)發(fā)，有你們的 『點贊和評論』，才是我創(chuàng)造的動力。
• 關(guān)注小編，同時可以期待后續(xù)文章ing?，不定期分享原創(chuàng)知識。
• 更多鴻蒙最新技術(shù)知識點，請關(guān)注作者博客： https://t.doruo.cn/14DjR1rEY

• 異色邊緣龍局北辰卡組詳解
• 《怪化貓》系列第二章《火鼠》近日公開諸多新情報
• steam特賣頁面出現(xiàn)神秘粉發(fā)女孩 引發(fā)網(wǎng)友熱烈討論
• 大雪節(jié)氣活動：桃源深處有人家雪盛冬藏
• 游俠晚報：《絕地潛兵2》口碑上升 Fami通一周評分