事件-树叶云鸿蒙OS教程-鸿蒙OS (树叶云朵图片)

教程大全 2025-07-10 01:40:02 浏览次

事件主要包括手势事件和按键事件。手势事件主要用于智能穿戴等具有触摸屏的设备，按键事件主要用于智慧屏设备。

手势事件

手势表示由单个或多个事件识别的语义动作（例如：点击、拖动和长按）。一个完整的手势也可能由多个事件组成，对应手势的生命周期。JS UI 框架支持的手势事件有：

触摸

点击

click：用户快速轻敲屏幕。

长按

longpress：用户在相同位置长时间保持与屏幕接触。

具体的使用示例如下：

{{onclick}}
{{touchStart}}
{{touchMove}}
{{touchEnd}}
{{touchCancel}}
{{onLongPress}}

/* xxx.css */.container {flex-direction: column;justify-content: center;align-items: center;}.text-container {padding-top: 10px;flex-direction: column;}.text-style {padding-top: 20px;padding-left: 100px;width: 750px;height: 100px;text-align: center;font-size: 50px;color: #ffffff;background-color: #09ba07;}

// xxx.jsexport default {Data: {textData: '',touchStart: 'touchstart',touchMove: 'touchmove',touchEnd: 'touchend',touchCancel: 'touchcancel',onClick: 'onclick',onLongPress: 'onlongpress',},onInit() {this.textData = 'initdata';},onReady: function () {},onShow: function () {},onHide: function () {},onDestroy: function () {},touchCancel: function (event) {this.touchCancel = 'canceled';},touchEnd: function(event) {this.touchEnd = 'ended';},touchMove: function(event) {this.touchMove = 'moved';},touchStart: function(event) {this.touchStart = 'touched';},longPress: function() {this.onLongPress = 'longpressed';},click: function() {this.onClick = 'clicked';},}

按键事件

按键事件是智慧屏上特有的手势事件，当用户操作遥控器按键时触发。用户点击一个遥控器按键，通常会触发两次 Key 事件：先触发 action 为 0，再触发 action 为 1，即先触发按下事件，再触发抬起事件。action 为 2 的场景比较少见，一般为用户按下按键且不松开，此时 repeatCount 将返回次数。每个物理按键对应各自的按键值（keycode）以实现不同的功能，常用的按键值请参考组件通用事件。具体的使用示例如下：

{{up}}
{{down}}

/* xxx.css */.card-box {flex-direction: column;justify-content: center;}.content-box {align-items: center;height: 200px;flex-direction: column;margin-left: 200px;margin-right: 200px;}.content-text {font-size: 40px;text-align: center;}

// xxx.jsexport default {data: {up: 'up',down: 'down',},focusUp: function() {this.up = 'up focused';},blurUp: function() {this.up = 'up';},keyUp: function() {this.up = 'up keyed';},focusDown: function() {this.down = 'down focused';},blurDown: function() {this.down = 'down';},keyDown: function() {this.down = 'down keyed';},}

按键事件通过获焦事件向下分发，因此示例中使用了 focus 事件和 blur 事件明确当前焦点的位置。点按上下键选中 up 或 down 按键，即相应的 focused 状态，失去焦点的按键恢复正常的 up 或 down 按键文本。按确认键后该按键变为 keyed 状态。