在每个GUI应用程序中,事件在启用用户交互方面都扮演着非常重要的角色。每当用户与应用程序进行交互时,就会触发一个事件并执行相应的操作。
例如,当用户单击应用程序登录页面中的"Login"按钮时,将触发登录事件。
Event sender - 事件发送对象,引发实际事件。
Event listener - 事件监听函数,该函数侦听特定事件,然后在触发事件时执行。
它是处理事件的预定义类。它定义如下-
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包含两个属性,它们如下-
Object - 用于引发事件的可观察实例。在这种情况下,它是Button对象。
EventName - 它是事件名称。在这种情况下,它是点击事件。
第6步 - 最后,可以在以下指定的任何时间分离/删除事件侦听器-
testButton.off(Button.onTap);
您还可以使用另一种格式,如下所示-
testButton.removeEventListener(Button.onTap);
让无涯教程修改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
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)
Spring Boot与Kubernetes云原生微服务实践 -〔杨波〕