cc.Node事件响应

触摸事件

基本事件类型相应事件
TOUCH_START触摸开始事件
TOUCH_MOVE在屏幕上目标节点区域内移动时
TOUCH_END在目标节点区域内离开屏幕时
TOUCH_CANCEL在目标节点区域外离开屏幕时

cocos中所有事件都能够使用监听函数监听这类事件 
使用Node.on(EventType,callback,target,useCapture)注册函数进行监听事件触发 
1.callback函数中传入一个触摸对象 
2.callback函数中的this对象指向target

cc.Touch

callback内传入的是一个cc.Touch对象,以下为常见的cc.Touch方法

getLocation()

可以返回触摸位置信息对象

this.node.on(cc.Node.EventType.TOUCH_START,function(e){
      var pos = e.getLocation();
      cc.log(pos);
},this);
  • 1
  • 2
  • 3
  • 4

Delta()

可以返回距离上次触摸偏移量,因此可以利用下列代码实现节点随触摸移动而移动

start(){
    this.node.on(cc.Node.EventType.TOUCH_MOVE,function(e){
          var delta = e.getDelta();
          this.node.x += delta.x;
          this.node.y += delta.y;
    },this);
},
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

事件传递

cocos内,节点是往父节点上传递的 
stopPropagationImmediate()与 stopPropagation()

按键事件

基本事件类型相应事件
KEY_DOWN按键按下
KEY_UP按键弹起

与触摸事件同理,需要一个函数监听,即事件注册函数 
cc.systemEvent.on(EventType,callback,target,useCapture)

keyCode

KEY是cc模块的枚举类型,结合switch()使用

cc.systemEvent.on(cc.SystemEventType.KEY_DOWN,function(e){
    switch(e.keyCode){
        case cc.KEY.space:
             cc.log("space key down");
             break;
    }
},this);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

自定义事件

自定义事件需要监听与发送事件

自定义事件的接收者on

this.node.on(string,callback.target,useCapture); 
其中第一个参数为自定义的字符串 
可以接收发送过来的事件(字符串)

自定义事件的发送者emit

this.node.emit(string,[detail]); 
第二个参数是一个表,可以从callback传入的对象中访问

向上派送事件EventCustom

dispatchEvent(new cc.Event.EventCustom(“name”, bool)); 
第二个参数告诉编译器是否向上传递派送事件

注销事件监听

off(type,callback,target,useCapture)删除之前与同类型,回调,目标或 useCapture 注册的回调,例如:

test:function(e){
    cc.log("test");
},
this.node.on(cc.Node.EventType.TOUCH_MOVE,this.test,this);
this.node.off(cc.Node.EventType.TOUCH_MOVE,this.test,this);
  • 1
  • 2
  • 3
  • 4
  • 5

还可以使用targetoff(target),移除这个目标所有事件监听

this.node.on(cc.Node.EventType.TOUCH_MOVE,this.test,this);
this.node.targetoff(this.node);
### 如何在 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、付费专栏及课程。

余额充值