NativeScript - 事件处理

NativeScript - 事件处理 首页 / NativeScript入门教程 / NativeScript - 事件处理

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

例如,当用户单击应用程序登录页面中的"Login"按钮时,将触发登录事件。

  • Event sender  - 事件发送对象,引发实际事件。

  • Event listener - 事件监听函数,该函数侦听特定事件,然后在触发事件时执行。

Observable Class

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

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

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

Event Listener

在本章中,让无涯教程了解如何创建对象并将事件侦听器添加到该对象。

第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

让无涯教程修改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云原生微服务实践 -〔杨波〕

苏杰的产品创新课 -〔苏杰〕

安全攻防技能30讲 -〔何为舟〕

摄影入门课 -〔小麥〕

罗剑锋的C++实战笔记 -〔罗剑锋〕

Django快速开发实战 -〔吕召刚〕

Python自动化办公实战课 -〔尹会生〕

Vue 3 企业级项目实战课 -〔杨文坚〕

好记忆不如烂笔头。留下您的足迹吧 :)