Cocos Creator 系統學習筆記(三)--事件響應
阿新 • • 發佈:2018-11-15
事件響應:
cc.Class({ extends: cc.Component, properties: { }, /**觸控事件 * 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: 可以使用stopPropagationImmediate停止事件傳遞。 **/ onLoad0:function () { // (1) 監聽對應的觸控事件: 向引擎底層註冊一個回掉函式,當有觸控事件發生的時候呼叫該回掉函式; // cc.Node.EventType.TOUCH_START: 觸控開始 // cc.Node.EventType.TOUCH_MOVE: 觸控移動 // cc.Node.EventType.TOUCH_END: 觸控結束, (物體內部結束) // cc.Node.EventType.TOUCH_CANCEL: 觸控結束, (物體外部結束) /* (2) 觸控函式的回掉函式格式 function(t) -->t:物件。是 cc.Touch物件觸控事件物件 {觸控資訊,事件資訊} call --> this, this指向誰就是這個target(可選引數);你要綁那個物件作為你回掉函式的this, 可以為空 或者顯示繫結function () {}.bind(this); this.node.on(tyep,callback,target);*/ this.node.on(cc.Node.EventType.TOUCH_START, function(t) { console.log("cc.Node.EventType.TOUCH_START called"); // 停止事件傳遞 //t.stopPropagationImmediate(); }, this); this.node.on(cc.Node.EventType.TOUCH_MOVE, this.on_touch_move, this); this.node.on(cc.Node.EventType.TOUCH_END, function(t) { console.log("cc.Node.EventType.TOUCH_END called"); }.bind(this)); this.node.on(cc.Node.EventType.TOUCH_CANCEL, function(t) { console.log("cc.Node.EventType.TOUCH_CANCEL called"); }, this); // 移除 // this.node.off(cc.Node.EventType.TOUCH_MOVE, this.on_touch_move, this); // 移除target上所有的註冊事件,移除目標上的所有註冊事件。所以不是this.node // this.node.targetOff(this); }, /* t: --> cc.Touch 觸控的位置: 螢幕座標,左小角(0, 0); getLocation(); */ on_touch_move: function(t) { // 位置 console.log("cc.Node.EventType.TOUCH_MOVE called"); console.log(t.getLocation());//觸控的位置 var w_pos = t.getLocation(); // cc.Vec2 {x, y} console.log(w_pos, w_pos.x, w_pos.y); // 距離上一次觸控變化了多少; var delta = t.getDelta(); // x, y各變化了多少cc.Vec2(x, y) this.node.x += delta.x; this.node.y += delta.y; }, //事件的向上傳遞 /*鍵盤事件 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] */ // (1)向引擎註冊一個事件型別的回撥函式, // (2) 按鍵時間的型別: cc.SystemEvent.EventType.KEY_DOWN, cc.SystemEvent.EventType.KEY_UP; // (3) 配置的回掉函式: function(event) {} target, 目標 // (4) 每一個按鍵,都會對應一個按鍵碼, space, A, B, C, event物件 event.keyCode; // (5) cc.systemEvent 小寫開頭,不是大寫, 大寫SystemEvent類, systemEvent 全域性一個例項 // 按鍵被按下 start:function(){ console.log(cc.systemEvent); 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) { switch(event.keyCode) { case cc.KEY.space: console.log("space key down!"); break; case cc.KEY.a: console.log("a key down!"); break; } }, on_key_up: function(event) { switch(event.keyCode) { case cc.KEY.space: console.log("space key up!"); break; case cc.KEY.a: console.log("a key up!"); break; } }, /*自定義事件 1:監聽: this.node.on(“自定義事件名稱”, function, target, useCapture); 2: 自派送: emit(“事件名稱”, [detail]); 只有自己能夠收到; 3: 冒泡派送: dispatchEvent(new cc.Event.EventCustom(“name”, 是否冒泡傳遞)); */ // 接收者 // 事件型別,是自定義的字串; // 回撥函式: function(e) {} e--> cc.Event.EventCustom的例項 //e.detail 自定義引數 onLoad:function(){ this.node.on("pkg_event", function(e){ console.log("pkg_event", e.detail); }, this); // 派發者,只能傳遞給自己,不會向上傳遞 this.node.emit("pkg_event", {blake: "huang"}); // end // 派送者,不只是發給自己,發給我們這個體系; // true/false, true向上傳遞, false不向上傳遞 var e = new cc.Event.EventCustom("pkg_event", true);//new 出物件 e.detail = {blake:"uang"}; this.node.dispatchEvent(e); //在父物件節點上檢視是否接收資訊 }, });