cocos添加节点事件的3种方式

news2025/11/4 10:33:05

我们以button为例来说明一下cocos怎样为节点添加事件：

直接通过cocos熟悉检查器绑定

cocos绑定事件

添加事件脚本

import { _decorator, Component, Node, input, Input, Button, EventKeyboard } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('Attack')
export class Attack extends Component {

    attackBegin(event: Event, customEventData: string) {
        console.log(event);
        console.log(customEventData);
        console.log("攻击选中");
    }
}

点击事件Event的类型是：EventTouch(手机、浏览器手机模式)或者EventMouse(电脑)

这样绑定，可以捕获到单击和双击事件，双击事件会被当场2次单击。

cocos绑定事件结果

cocos中绑定Button节点、代码组件中为Button节点添加事件

import { _decorator, Component, Node, input, Input, Button, EventKeyboard } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('Attack')
export class Attack extends Component {

    @property(Button)
    button: Button | null = null;
    
    onLoad () {
        this.button.node.on(Button.EventType.CLICK, this.attackBegin, this);
    }

    attackBegin (button: Button) {
        console.log(button);
        console.log("攻击选中");
    }
}

这样绑定，也可以捕获到单击和双击事件，双击事件会被当场2次单击。

但是没有办法自定义事件数据，事件的参数也是button本身。
cocos绑定节点
绑定button方式结果

完全代码中实现绑定

import { _decorator, Component, Node, input, Input, Button, EventKeyboard } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('Attack')
export class Attack extends Component {

    onLoad() {
        let button = this.node.getComponent(Button);
        // 手动创建一个事件
        let handler = new Component.EventHandler();
        // 要响应事件的节点
        handler.target = this.node;
        // 脚本的名字，注意大小写，检查文件名和class名是否一直
        handler.component = "Attack";
        // 自定义事件数据
        handler.customEventData = "EventHandler customer data";
        // 事件回调方法
        handler.handler='attackBegin';
        // 将事件添加到点击事件列表中
        button.clickEvents.push(handler);
    }


    attackBegin(event: Event, customEventData: string) {
        console.log(event);
        console.log(customEventData);
        console.log("攻击选中");
    }
}