美文网首页
004--cc.Node事件响应

004--cc.Node事件响应

作者: HeavenOrSky | 来源:发表于2019-04-11 10:58 被阅读0次

    触摸事件

    1: 触摸事件类型: START, MOVED, ENDED(物体内), CANCEL(物体外);
    2: 监听触摸事件: node.on(类型, callback, target(回掉函数的this), [useCapture]);
    3: 关闭触摸事件: node.off(类型, callback, target(回掉函数的this), [useCapture]);
    4: targetOff (target): 移除所有的注册事件;
    5: 回掉函数的参数设置 function(t(cc.Touch))
    6: cc.Touch: getLocation返回触摸的位置;getDelta返回距离上次的偏移;
    7: cc.Event: stopPropagationImmediate/stopPropagation 停止事件的传递;
    8: 事件冒泡: 触摸事件支持节点树的事件冒泡,会从当前前天往上一层一层的向父节点传送;
    9: 完成物体跟随手指触摸的案例;

    const {ccclass, property} = cc._decorator;
    
    @ccclass
    export default class NewClass extends cc.Component {
    
        // LIFE-CYCLE CALLBACKS:
    
        onLoad ()
         {
            this.addListenerTouchEvent();
         }
    
        start () {
    
        }
    
        // update (dt) {}
    
        addListenerTouchEvent(){
            this.node.on(cc.Node.EventType.TOUCH_START,this.touchStart,this);
            this.node.on(cc.Node.EventType.TOUCH_MOVE,this.touchMove,this);
            this.node.on(cc.Node.EventType.TOUCH_END,this.touchEnd,this);
            this.node.on(cc.Node.EventType.TOUCH_CANCEL,this.touchCancle,this);
        }
    
        touchStart(touch){
            console.log("当手指触摸到屏幕时。");
            
        }
        touchMove(touch){
            console.log("当手指在屏幕上移动时。");
        }
        touchEnd(touch){
            console.log("触摸结当手指在目标节点区域内离开屏幕时束");
        }
        touchCancle(touch){
            console.log("当手指在目标节点区域外离开屏幕时");
        }
        
    }
    
    

    键盘事件

    1:cc.SystemEvent.on(type, function, target, useCapture);
    type: cc.SystemEvent.EventType.KEY_DOWN 按键按下;
    cc.SystemEvent.EventType.KEY_UP 按键弹起;
    2: cc.SystemEvent.on(type, function, target, useCapture);
    3: 监听的时候,我们需要一个cc.SystemEvent类的实例,我们有一个全局的实例cc.systemEvent,小写开头
    3: 键盘回掉函数: function(event) {
    event.keyCode [cc.KEY.left, ...cc.KEY.xxxx]

    const {ccclass, property} = cc._decorator;
    
    @ccclass
    export default class Helloworld extends cc.Component {
        onLoad(){
            this.addListenerKeyBoardAction();
        }
    
        start(){
            this.node.emit('say-hello','hello******','123465');
        }
    
    
        onDestroy(){
            this.deleteListenerKeyBoardAction();
        }
    
    
        //添加键盘监听事件
        addListenerKeyBoardAction(){
            cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN,this.onKeyDown)
            cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP,this.onKeyUp)
        }
        //移除键盘监听事件
        deleteListenerKeyBoardAction(){
            cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN,this.onKeyDown)
            cc.systemEvent.off(cc.SystemEvent.EventType.KEY_UP,this.onKeyUp)
        }
    
        onKeyDown(event){
            switch(event.keyCode){
                case cc.macro.KEY.a:
                    console.log("A键按下");
                    break;
                case cc.macro.KEY.d:
                    console.log("D键按下");
                    break;
                case cc.macro.KEY.w:
                    console.log("W键按下");
                    break;
                case cc.macro.KEY.s:
                    console.log("S键按下");
                    break;
            }
        }
    
        onKeyUp(event){
            switch(event.keyCode){
                case cc.macro.KEY.a:
                    console.log("A键抬起");
                    break;
                case cc.macro.KEY.d:
                    console.log("D键抬起");
                    break;
                case cc.macro.KEY.w:
                    console.log("W键抬起");
                    break;
                case cc.macro.KEY.s:
                    console.log("S键抬起");
                    break;
            }
        }
    }
    

    自定义事件

    1:监听: this.node.on(“自定义事件名称”, function, target, useCapture);
    2: 自派送: emit(“事件名称”, [detail]); 只有自己能够收到;
    3: 冒泡派送: dispatchEvent(new cc.Event.EventCustom(“name”, 是否冒泡传递));
    监听事件
    事件处理是在节点(cc.Node)中完成的.对于组件,可以通过访问节点this.node来注册和监听事件。
    监听事件可以通过this.node.on()函数来注册事件
    监听事件可以通过this.node.off()函数来关闭事件

    发射事件
    我们可以通过两种方式发射事件:emit 和 dispatchEvent。两者的区别在于,后者可以做事件传递。 我们先通过一个简单的例子来了解 emit 事件

    const {ccclass, property} = cc._decorator;
    
    @ccclass
    export default class Helloworld extends cc.Component {
        onLoad(){
            this.node.on('say-hello',(msg)=>{console.log(msg) })
        }
    
        start(){
            this.node.emit('say-hello','hello******','123465');
        }
    }
    
    运行结果

    emit会将第二个参数位置的"hello******"打印出来
    需要说明的是,出于底层事件派发的性能考虑,这里最多只支持传递 5 个事件参数。所以在传参时需要注意控制参数的传递个数
    再看另外一个例子

    const {ccclass, property} = cc._decorator;
    
    @ccclass
    export default class Helloworld extends cc.Component {
        onLoad(){
            this.node.on('foo',(arg1,arg2,arg3)=>{console.log(arg1,arg2,arg3)})
        }
    
        start(){
            let arg1  =1,arg2 = 2,arg3 = 3;
            this.node.emit('foo',arg1,arg2,arg3);
        }
    }
    
    
    运行结果

    通过dispatchEvent 方法发射的事件,会进入事件派送阶段。在 Cocos Creator 的事件派送系统中,我们采用冒泡派送的方式。冒泡派送会将事件从事件发起节点,不断地向上传递给他的父级节点,直到到达根节点或者在某个节点的响应函数中做了中断处理 event.stopPropagation()

    bubble-event

    如上图所示,当我们从节点 c 发送事件 “foobar”,倘若节点 a,b 均做了 “foobar” 事件的监听,则 事件会经由 c 依次传递给 b,a 节点。如:

    // 节点 c 的组件脚本中
    this.node.dispatchEvent( new cc.Event.EventCustom('foobar', true) );
    
    

    如果我们希望在 b 节点截获事件后就不再将事件传递,我们可以通过调用 event.stopPropagation() 函数来完成。具体方法如下:

    // 节点 b 的组件脚本中
    this.node.on('foobar', function (event) {
      event.stopPropagation();
    });
    
    

    请注意,在发送用户自定义事件的时候,请不要直接创建 cc.Event 对象,因为它是一个抽象类,请创建 cc.Event.EventCustom 对象来进行派发。

    相关文章

      网友评论

          本文标题:004--cc.Node事件响应

          本文链接:https://www.haomeiwen.com/subject/bfpziqtx.html