cocosCreator 之 节点组件事件

版本: 3.4.0

简介

本文主要讲述组件脚本中如何使用节点和组件相关的事件。更多内容参考：

节点事件系统

事件API

在了解之前我们需要了解UITransform组件，它不仅用于设置尺寸、锚点外，还被用于作为2D UI节点的触摸事件监听。

因此我们可以通过改变它的大小来设定触摸区域大小，或避免页面透点。

针对透点使用的主要接口是BlockInputEvents，比如经常用到的页面半透明遮罩层，我们可以：

• 创建一个2D对象的单色精灵SpriteSplash
• 通过组件UITransform设定大小为屏幕大小
• 通过组件Sprite 设置颜色为黑色，透明度为180
• 属性检查器增加组件Widget, 宽高度拉伸均为0， 用于屏幕适配
• 属性检查器增加组件BlockInputEvents，用于防透点

这样就实现了我们想要的效果。

cocosCreator提供了很方便的接口用于处理节点的鼠标事件、触摸事件等，以触摸结束事件为例：

onEnable() {
  this.node.on(Node.EventType.TOUCH_END, this._touchEndEvent, this);
}

onDisable() {
  this.node.off(Node.EventType.TOUCH_END, this._touchEndEvent, this);
}

private _touchEndEvent() {
  console.log("------ node touchEndEvent");
}

通过on和off进行注册或删除事件相关即可。

注意： 事件的注册最好在onEnable中，删除在onDisable中。如果删除放在onDestory中可能会出现一些程序报错问题。

UI组件事件

UI组件的种类有很多，但支持事件的有：

• Button组件 按钮相关

• EditBox组件 文本输入框相关

• ScrollView组件 滚动容器相关

• Toggle组件 CheckBox相关

• ToggleContainer组件 对多个Toggle管理，实现单选

• Slider组件 滑动器组件

• PageView组件 页面视图容器

• WebView组件 显示网页相关

• VideoPlayer组件 视频播放组件相关

它们的组件事件结构大致是类似的:

属性	功能说明
Target	带有脚本组件的节点。
Component	脚本组件名称。
Handler	指定一个回调函数，当用户点击 UI组件 并释放时会触发此函数。
CustomEventData	用户指定任意的字符串作为事件回调的最后一个参数传入。

添加事件的方式主要有三种：

• 组件脚本中构造**EventHandler**对象，然后设置对应的target、component、handler 和 customEventData 参数

// 以Button为例
import { _decorator, Component, Event, Node, Button, EventHandler } from 'cc';
const { ccclass, property } = _decorator;

@ccclass("example")
export class example extends Component {
  onLoad () {
    const clickEventHandler = new EventHandler();
    clickEventHandler.target = this.node; 
    clickEventHandler.component = 'example';
    clickEventHandler.handler = 'callback';
    clickEventHandler.customEventData = 'foobar';

    const button = this.node.getComponent(Button);
    button.clickEvents.push(clickEventHandler);
  }

  // event 是一个 Touch Event 对象，你可以通过 event.target 取到事件的发送节点
  callback (event: Event, customEventData: string) {
    const node = event.target as Node;
    const button = node.getComponent(Button);
    console.log(customEventData); // foobar
  }
}

• 通过编译器来调用组件脚本中对应的事件，脚本中的事件接口要设置为public

UI组件	编译器中的事件名
Button	ClickEvents
EditBox	EditingDidBegan, TextChanged, EditingDidEnded, EditingReturn
ScrollView	ScrollEvents
Toggle	CheckEvents, ClickEvents
ToggleContainer	CheckEvents
Slider	SliderEvents
PageView	PageEvents
webView	WebviewEvents
VideoPlayer	VideoPlayerEvent

以按钮为例：

import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;
 
@ccclass('UI_DemoLayer')
export class UI_DemoLayer extends Component {
  public ClickCloseEvent(customData: string) {
    this.node.destroy();
  }
}

• 通过获取组件的节点然后调用on来实现，该使用方式跟Node的触摸事件类似，不同的UI组件有对应不同的类型, 以按钮为例:

import { _decorator, Component, Button, Node } from 'cc';
const { ccclass, property } = _decorator;
 
@ccclass('UI_DemoLayer')
export class UI_DemoLayer extends Component {
  // 在编译器中声明属性
  @property(Button)
  btn: Button = null;
  
  // 以Button为例
  onEnable() {
    this.btn.node.on(Button.EventType.CLICK, this._clickCLoseEvent, this);
  }

  onDisable() {
    this.btn.node.off(Button.EventType.CLICK, this._clickCLoseEvent, this);
  }
  
  private _clickCLoseEvent(customData: string) {
    this.node.destroy();
  }
}

需要注意的是：不同的UI组件的事件类型不同，不要混合使用。