📌  相关文章
📜  NativeScript-事件处理

📅  最后修改于: 2020-12-08 05:53:00             🧑  作者: Mango

在每个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";

第三步

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

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

第4步

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

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

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

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

第5步

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

这里，

$ 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并添加以下代码-

这里，

  • 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 =

这里，

  • 添加了新的事件侦听器onButtonTap。

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

第三步

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

LOG from device : tap 
LOG from device : Fire an event