鸿蒙HarmonyOS实战-ArkUI事件（键鼠事件）_harmonyos监听输入法事件(4)

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

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组件设置onMouse回调
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组件设置onMouse回调
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 + ‘)’;
})
}
}

好像也没效果

事件冒泡是一种事件传播机制，指的是当一个元素触发了某个事件时，该事件会从触发元素开始向上层元素逐级传播，直到最顶层的元素为止。在事件冒泡的过程中，父级元素会逐级接收该事件，并可以选择是否处理该事件。

具体来说，当一个元素触发了某个事件时（比如鼠标点击、按键按下等），会先执行触发元素上绑定的事件处理函数，然后事件会向上级元素传播，逐级执行上级元素上绑定的事件处理函数，直到达到文档顶层的根元素或者事件被停止传播为止。

事件冒泡的好处在于它可以让事件的处理更加灵活。通过将事件处理程序绑定在祖先元素上，可以实现对后代元素的事件统一管理。比如，当页面中有多个按钮时，可以通过将点击事件处理程序绑定在父元素上，来处理所有按钮的点击事件，避免了为每个按钮都绑定事件处理函数的繁琐。

事件冒泡有时也可能会带来一些问题。当多个元素重叠时，事件触发后会逐级向上冒泡，导致多个元素都接收到了该事件，可能会产生意外的行为。在这种情况下，可以通过使用事件的stopPropagation()方法来阻止事件继续传播，或者使用事件的target属性来判断事件源，从而实现精确控制事件的处理。

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事件中设置阻止冒泡
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 + ‘)’;
})

🦋1.3 hoverEffect

hover effect是指当鼠标悬停在一个元素上时，触发特定的效果。

hoverEffect(value: HoverEffect)

HoverEffect枚举值	效果说明
Auto	组件默认提供的悬浮态效果，由各组件定义。
Scale	动画播放方式，鼠标悬浮时：组件大小从100%放大至105%，鼠标离开时：组件大小从105%缩小至100%。
Highlight	动画播放方式，鼠标悬浮时：组件背景色叠加一个5%透明度的白色，视觉效果是组件的原有背景色变暗，鼠标离开时：组件背景色恢复至原有样式。
None	禁用悬浮态效果

// 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)
}
}

2.按键事件

🦋2.1 onKeyEvent

onKeyEvent是一个在编程中常见的事件处理函数，用于处理按键事件。当用户按下或释放一个按键时，系统会生成一个按键事件，然后通过调用onKeyEvent函数来处理这个事件。

在onKeyEvent函数中，可以根据发生的按键事件类型，采取相应的处理逻辑。比如，可以判断按下的按键是哪个键，然后执行相应的操作。常见的操作包括：移动游戏角色、打开菜单、执行特定的动作等等。

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设置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()

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

**

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！