Cocos Creator踩坑篇：事件机制问题和this问题整合

亦凉 2022-03-02 06:00 910阅读 0赞

**经过一天的研究，终于搞明白以下两个让人匪夷所思的事实**

*  **Cocos的node.on和node.emit只能在同一脚本内触发。。。Excuse me？这要他有什么用？**
 *  **Cocos的node.on和node.dispatchEvent也只能在同一父结点之下有效**

**解决方案一：还好拥有全局的cc.game.on以及cc.game.emit，不过这样貌似会浪费过多的性能，因为我猜测它触发事件也要走一遍所有的系统事件，所以可能会造成性能上的损失**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70][]

**解决方案二：既然Game依赖于EventManager实现，那我们自己写一个全局的EventManager岂不更好，官网文档说明****[https://docs.cocos.com/creator/api/zh/classes/EventTarget.html][https_docs.cocos.com_creator_api_zh_classes_EventTarget.html]**

**奉上ts的export和import[https://beginor.github.io/2016/03/20/typescript-export-and-import.html][https_beginor.github.io_2016_03_20_typescript-export-and-import.html]**

**下面是个完整的范例**

**项目结构**

![20190319220040265.png][]

**新建GlobalVariable.ts**

var NotificationCenter = new cc.EventTarget();
    
    
    //默认导出NotificationCenter
    export {NotificationCenter as default};

**新建JumpButton.ts**

const {ccclass, property} = cc._decorator;
    import GlobalPars from '../Base/GlobalVariable';
    
    @ccclass
    export default class JumpButton extends cc.Component {
        PlayerJump(){
            GlobalPars.emit('playerJump');
        }
    }

**新建PlayerLogic.ts**

const {ccclass, property} = cc._decorator;
    import GlobalPars from '../Base/GlobalVariable';
    
    @ccclass
    export default class PlayerLogic extends cc.Component {
    
         onLoad () {
             GlobalPars.on('playerJump', function () {
                 console.log('I am Jumping');
             });
         }
    
    }

**将JumpButton.ts绑定在按钮上，并注册点击事件（PlayerJump()）,创建Player结点，将PlayerLogic挂载到上面，运行场景**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70 1][]

**说到这，也就涉及到了ts中的this问题（果然欠的技术债都要还啊），因为我发现在GlobalPars.on里面，不能直接写this.方法名，因为这样this默认为GlobaPars中的this，而不是当前节点的this，也就会导致报错**

**解决方法1**

GlobalPars.on('playerJump', function () {
                 this.Jump();
             },this);

**解决方法2**

let self = this;  
    GlobalPars.on('playerJump', function () {
                 self.Jump();
             });

**解决方案3**

GlobalPars.on('playerJump', ()=>this.Jump());

**奉上两篇讲this和箭头函数（兰布达表达式）的文章**

*  **[https://blog.csdn.net/lipei1220/article/details/39339557][https_blog.csdn.net_lipei1220_article_details_39339557]**
 *  **[https://www.jianshu.com/p/1cf9f3592942][https_www.jianshu.com_p_1cf9f3592942]**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70]: /images/20220302/b65e2c30c34349ecae2c5f41351141e0.png
[https_docs.cocos.com_creator_api_zh_classes_EventTarget.html]: https://docs.cocos.com/creator/api/zh/classes/EventTarget.html
[https_beginor.github.io_2016_03_20_typescript-export-and-import.html]: https://beginor.github.io/2016/03/20/typescript-export-and-import.html
[20190319220040265.png]: /images/20220302/179f93a0e5fe42ff8f0b904308779031.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70 1]: /images/20220302/ed9545b5615c4b8cb2838ff611cd3d6a.png
[https_blog.csdn.net_lipei1220_article_details_39339557]: https://blog.csdn.net/lipei1220/article/details/39339557
[https_www.jianshu.com_p_1cf9f3592942]: https://www.jianshu.com/p/1cf9f3592942