NativeScript - 事件处理

---

在每个 GUI 应用程序中，事件在实现用户交互方面发挥着非常重要的作用。每当用户与应用程序交互时，就会触发一个事件并执行相应的操作。

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

事件涉及两名演员 -

• 事件发送者- 引发实际事件的对象。

• 事件侦听器- 侦听特定事件并在事件触发时执行的函数。

可观察类

它是一个处理事件的预定义类。它的定义如下 -

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

现在将点击事件附加到 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 - 这是事件名称。在这种情况下，它是点击事件。

步骤6

最后，事件侦听器可以随时分离/删除，如下所示 -

testButton.off(Button.onTap);

您还可以使用另一种格式，如下所示 -

testButton.removeEventListener(Button.onTap);

修改BlankNgApp

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

步骤1

打开 home 组件的 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步

打开 home 组件的代码“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。

• 打印事件名称，点击按钮文本，在控制台中触发事件。

步骤3

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

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