NativeScript - 事件处理

在每个GUI应用程序中，事件在启用用户交互方面都扮演着非常重要的角色。每当用户与应用程序交互时，都会触发一个事件，并执行相应的操作。

例如，当用户单击应用程序登录页面上的登录按钮时，它会触发登录过程。

事件涉及两个参与者：

事件发送者 - 触发实际事件的对象。
事件监听器 - 监听特定事件并在触发事件时执行的函数。

Observable 类

这是一个用于处理事件的预定义类。其定义如下：

const Observable = require("tns-core-modules/data/observable").Observable;

在 NativeScript 中，几乎每个对象都派生自 Observable 类，因此每个对象都支持事件。

事件监听器

让我们在本节中了解如何创建对象并向对象添加事件监听器。

步骤 1

创建一个用于生成事件的按钮，如下所示：

const Button = require("tns-core-modules/ui/button").Button; 
const testButton = new Button();

步骤 2

接下来，按如下所示向按钮添加文本：

testButton.text = "Click";

步骤 3

创建一个函数 onTap，如下所示：

let onTap = function(args) {
   console.log("you clicked!"); 
};

步骤 4

现在将 tap 事件附加到 onTap 函数，如下所示：

testButton.on("tap", onTap, this);

另一种添加事件监听器的方法如下：

testButton.addEventListener("tap", onTap, this);

步骤 5

通过 UI 本身附加事件的另一种方法如下所示：

<Button text="click" (tap)="onTap($event)"></Button>

这里，

$event 的类型为 EventData。EventData 包含两个属性，如下所示：

对象 - 用于触发事件的可观察实例。在本例中，它是 Button 对象。

EventName - 事件名称。在本例中，它是 tap 事件。

步骤 6

最后，事件监听器可以在任何时候分离/删除，如下所示：

testButton.off(Button.onTap);

您也可以使用另一种格式，如下所示：

testButton.removeEventListener(Button.onTap);

修改 BlankNgApp

让我们修改 BlankNgApp 应用程序以更好地理解 NativeScript 中的事件。

步骤 1

打开主页组件的 UI，src/app/home/home.component.html 并添加以下代码：

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar>
<StackLayout> 
   <Button text='Fire an event' class="-primary" color='gray' (tap)='onButtonTap($event)'></Button>
</StackLayout>

这里，

tap 是事件，Button 是事件触发器。
onButtonTap 是事件监听器。

步骤 2

打开主页组件的代码，‘src/app/home/home.component.ts’ 并更新以下代码：

import { Component, OnInit } from "@angular/core"; 
import { EventData } from "tns-core-modules/data/observable"; 
import { Button } from "tns-core-modules/ui/button" 
@Component({ 
   selector: "Home", 
   templateUrl: "./home.component.html" 
}) 
export class HomeComponent implements OnInit { 
   constructor() { 
      // Use the component constructor to inject providers. 
   } 
   ngOnInit(): void { 
      // Init your component properties here. 
   } 
   onButtonTap(args: EventData): void { 
      console.log(args.eventName); 
      const button = <Button>args.object; 
      console.log(button.text); 
   } 
}

这里，

添加新的事件监听器 onButtonTap。
打印事件名称 tap 和按钮文本，在控制台中触发一个事件。

步骤 3

运行应用程序并点击按钮。它会在控制台中打印以下行。

LOG from device <device name>: tap 
LOG from device <device name>: Fire an event

打印页面