004--cc.Node事件响应

触摸事件

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 对象来进行派发。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,464评论 1 11
  • 命令 新建项目: cocos new -l js projectname 运行项目:cocos run -p we...
    LIsPeri阅读 4,508评论 0 2
  • Dom事件 事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信。DOM支持大量的事件 (一) Eve...
    woow_wu7阅读 1,750评论 0 1
  • 事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信。DOM支持大量的事件,本节介绍DOM的事件编程。...
    许先生__阅读 912评论 0 3
  • 自从二宝就要来我家,熟人碰面除了礼貌性地问预产期,问得最多的就是你家大宝乐意么? 早在几年前,大约大宝5、6岁时,...
    悦书_王小悦阅读 227评论 10 7