Cocos Creator cc.Node.点击事件

本文详细介绍了触摸事件的类型及监听方法,包括START、MOVED、ENDED和CANCEL的区别,并解释了如何利用cc.Node.EventType进行事件监听。此外,还探讨了按键事件的分类与注册方式,以及如何自定义事件。

触摸事件

 

1.触摸事件的类型:START触摸启动,MOVED移动,ENDED弹起来,CANCEL取消;

ENDED和CANCEL区别是ENDED物体内弹起来,CANCEL是在物体外范围弹起。

 

2.监听触摸事件,node.on(类型,callback,target(回调函数的this),[useCapture])

 

 

3.触摸事件,node.on(类型,callback,target(回调函数的this),[useCapture])

 

 

      //(1)监听触摸事件 向引擎底层注册回调函数
    	//当有触摸事件发生等时候,调这个方法
    	//cc.Node.EventType.TOUCH_START 触摸开始
    	

    	//(2)回调函数等格式 function(t) t对象是tt.Touch的对象
    	//这个对象包含的信息有[触摸信息,事件信息];
    	
    	//(3)target 目标谁来调等callback 哪个对象来调用等这个callback
    	//那就是哪个对象在callback来绑定实例,target就是里面this对象
    
    	//最后一个参数默认即可
     onLoad: function() {
        this.node.on(cc.Node.EventType.TOUCH_START,
            function(t){console.log("cc.Node.EventType.TOUCH_START ")},this)
        this.node.on(cc.Node.EventType.TOUCH_MOVE,
            function(t){console.log("cc.Node.EventType.TOUCH_MOVE ")},this)
            
        this.node.on(cc.Node.EventType.TOUCH_END,
            function(t){console.log("cc.Node.EventType.TOUCH_END ")},this)
            
        this.node.on(cc.Node.EventType.TOUCH_CANCEL,
            function(t){console.log("cc.Node.EventType.TOUCH_CANCEL ")},this)
     },

 

 

4.如果这时候 不想监听了 就可以通过off来关闭, 但是你的,

callback不要是匿名函数,要用一个函数对象来保存

 

    on_touch_moved:function(t){
        console.log("cc.Node.EventType.TOUCH_END ");
    },

 

 

5.关闭注册

    this.node.off(cc.Node.EventType.TOUCH_END,
        this.on_touch_moved ,this)

 

 


6.移除目标上的所有事件

targetoff(target)

 

 

 

7.cc.Touch

getLocation 获取当前触点位置 做下角(0,0)为起始点

getDelta 获取触点距离上一次事件移动的距离对象,对象包含 x 和 y 属性

 

 

 

8.cc.Touch 同时包含 cc.Event事件

父节点移动那么所有的子节点都移动,那也就是("父节点是包含了

整个子节点的一个整体"),那这个整体其中一个成员收到来一个事件,

这时候这事件会向上传递,就是说你的一个子节点有一个事件发生后, 

父节点是可以收到等,这个就叫做事件等向上传递,事件冒泡。

 

如果子节点觉得这是一个私有事件,不想向上传递,想挡住这个事件,

stopPropagationImmediate//立即停止事件传递

stopPropagation停止传递当前事件。

 

 

 

9.按键事件

按键分类:按下EventType.KEY_DOWN,弹起KEY_UP

注册键盘事件

注意systemEvent是小写开头,

大写是类, 

小写是全局实例 他的说明是:系统事件单例,方便全局使用.

 

     onLoad: function() {
        //按键被按下
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN,
            this.on_key_down,this);
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP,
            this.on_key_up,this);
     },
    on_key_down: function(event){
        //获取按键 每个按键对应一个按键码
        //event对象带有keyCode 按键码
        //按键码在cc.KEY里面定义的
        console.log("按下");
        switch(event.KeyCode){
            case cc.KEY.space:
                console.log("空格按下");
            break;
        }
    },
    on_key_up: function(event){
         switch(event.KeyCode){
            case cc.KEY.space:
                console.log("空格弹起");
            break;
        }
    },

 

 

 

 

10.自定义事件

自己定义的事件,比如我要向你发送一个通知.

监听:this.node.on("自定义事件名",function,target,useCapture);

触发(派发事件):emit("事件名",[detail]) 只有自己能收到

冒泡派送:dispatchEvent(new cc.Event.EventCustom("name",是否冒泡传递))

 

onLoad:function(){
        //接收者 
        //事件类型是自定义字符串等 为事件名字
        //回调函数 参数Event.EventCustom的实例
        this.node.on("pkg_event",function(e){
            console.log("pkg_event");
            //输出自定义事件传过来等 自定义数据
            console.log(e.detail.name);
        },this);
        //end
        
        //发送者  直接触发事件
        //这种方法不会对事件传播到任何其他对象
        //也就是说这个事件只能传给自己
        //detail Object 事件的详细数据
        //可以传递自定义数据 比如说传一个表
        this.node.emit("pkg_event",{name:"下面"});
        //end

    },

 

如果我们要把这个事件向上发送

        //如果这个事件要向上传递,也就是不只是传给自己
        ////true向上传递 false不向上传递
        var ea = new cc.Event.EventCustom("pkg_event",true);
        //自定义数据
        ea.detail = {name:"小王"};
        //指定这个事件向上传递 
        this.node.dispatchEvent(ea);
        
        //end

父节点接收事件 脚本

 

     onLoad :function() {
        this.node.on("pkg_event",function(e){
            console.log("父节点收到冒泡");
            console.log(e.detail.name);
        },this);
     },

 

### 如何在 Cocos Creator 中使用 `cc.Node.on` 方法绑定事件 在 Cocos Creator 中,`cc.Node.on` 是一种常用的方式来为节点绑定特定类型的事件监听器。以下是关于其工作原理以及具体使用的详细说明。 #### 基础概念 `cc.Node.on` 方法允许开发者通过指定事件类型,在某个节点上注册回调函数。当触发对应的事件时,会自动执行已注册的回调逻辑[^2]。 #### 参数解析 根据引用描述,`on` 函数具有以下参数: - **type**: 事件类型,例如 `"touchstart"` 或自定义事件名称。 - **callback**: 当事件被触发时要执行的回调函数。 - **target**: 回调函数的作用域 (`this`),通常设置为目标对象本身或者组件实例。 - **useCapture**: (可选)布尔值,默认为 `false`。如果设为 `true`,则表示此事件会在捕获阶段触发;否则将在冒泡阶段触发。 #### 示例代码 下面是一个完整的例子展示如何利用 `cc.Node.on` 来响应按钮点击事件: ```javascript // 创建一个脚本并挂载到场景中的任意节点下 cc.Class({ extends: cc.Component, properties: { labelComponent: cc.Label, buttonNode: cc.Button // 这里假设已经拖拽关联好Button节点 }, onLoad() { // 绑定点击事件至buttonNode this.buttonNode.node.on('click', function () { console.log("Button was clicked!"); // 修改Label显示的文字内容 this.labelComponent.string = 'You pressed the button!'; }.bind(this)); // 如果需要支持移除事件,则可以保存回调引用 const touchStartCallback = function(event){ console.log("Touch started", event); }; this.buttonNode.node.on('touchstart', touchStartCallback); // 后续可以通过off方法解除绑定 // this.buttonNode.node.off('touchstart', touchStartCallback); } }); ``` 上述代码展示了两个典型的应用案例:一个是简单的 `'click'` 事件处理程序,另一个则是更复杂的 `'touchstart'` 事件处理器,并演示了如何手动管理事件订阅与取消订阅的关系。 #### 动态资源加载后的注意事项 假如涉及到动态加载图片或其他素材作为 Sprite Frame 并应用到 Node 上的情况,请记得适时清理不再使用的资源以防止内存泄漏。比如按照给定模式释放精灵帧资源[^3]: ```typescript releaseSprite(node: cc.Node): void{ if (!cc.isValid(node)) return; const spriteComp = node.getComponent(cc.Sprite); if(spriteComp && spriteComp.spriteFrame){ spriteComp.spriteFrame.decRef(); spriteComp.spriteFrame = null; } } ``` 以上就是有关于 `cc.Node.on` 的基本介绍及其实际运用方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值