Cocos Creator基礎（三） cc.Node事件響應

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傳回距離上次的偏移;
• 鍵盤事件
• • 1，cc.SystemEvent.on(type, function, target, useCapture);
  • 2，cc.SystemEvent.on(type, function, target, useCapture);
  • 3，監聽的時候，我們需要一個cc.SystemEvent類的執行個體，我們有一個全局的執行個體cc.systemEvent,小寫開頭
  • 3，鍵盤回掉函數: function(event) {
• 自定義事件
• • 1，監聽: this.node.on(“自定義事件名稱”, function(target) , this);
  • 2，自派送: emit(“事件名稱”, [detail]); 隻有自己能夠收到;
  • 3，冒泡派送: dispatchEvent(new cc.Event.EventCustom(“name”, 是否冒泡傳遞));

觸摸事件

1，觸摸事件類型: START, MOVED, ENDED(物體内), CANCEL(物體外);

(1) 監聽對應的觸摸事件: 像引擎底層注冊一個回掉函數，當有觸摸事件發生的時候掉這個回掉函數;
        cc.Node.EventType.TOUCH_START: 觸摸開始
        cc.Node.EventType.TOUCH_MOVE: 觸摸移動
        cc.Node.EventType.TOUCH_END: 觸摸結束, (物體内部結束)
        cc.Node.EventType.TOUCH_CANCEL: 觸摸結束, (物體外部結束)
           

2，監聽觸摸事件: node.on(類型, callback, target(回掉函數的this), [useCapture]);

this.node.on(cc.Node.EventType.TOUCH_START, t => {
            cc.log("cc.Node.EventType.TOUCH_START called");
            // this 函數裡的this  不是綁定this
        }, this);

        this.node.on(cc.Node.EventType.TOUCH_MOVE, t => {
            cc.log("cc.Node.EventType.TOUCH_MOVE called");
        }, this);


        this.node.on(cc.Node.EventType.TOUCH_END, t => {
            cc.log("cc.Node.EventType.TOUCH_END called");
        }, this);

        this.node.on(cc.Node.EventType.TOUCH_CANCEL, t => {
            cc.log("cc.Node.EventType.TOUCH_CANCEL called");
        }, this);
           

3，關閉觸摸事件: node.off(類型, callback, target(回掉函數的this), [useCapture]);

這裡因為是要對事件關閉，是以定義的觸摸事件需要提個事件名

on_touch_move: function () {  //先定義事件
        cc.log("on_touch_move")
    },
     onLoad() {
        this.node.on(cc.Node.EventType.TOUCH_START, t => {
            cc.log("cc.Node.EventType.TOUCH_START called");
            // this 函數裡的this  不是綁定this
        }, this);

        this.node.on(cc.Node.EventType.TOUCH_MOVE, this.on_touch_move, this); //這樣綁定


        this.node.on(cc.Node.EventType.TOUCH_END, t => {
            cc.log("cc.Node.EventType.TOUCH_END called");
        }, this);

        this.node.on(cc.Node.EventType.TOUCH_CANCEL, t => {
            cc.log("cc.Node.EventType.TOUCH_CANCEL called");
        }, this);

        // 最後移除
        this.node.off(cc.Node.EventType.TOUCH_MOVE, this.on_touch_move, this);
    },

           

4，targetOff (target): 移除所有的注冊事件;

// 移除target上所有的注冊事件
        this.node.targetOff(this);
           

5，回掉函數的參數設定 function(t(cc.Touch))

以上代碼傳的t 就是當你觸摸事件時的對象 可以通過這個對象獲得其許多屬性，實作相關操作

6，cc.Touch: getLocation傳回觸摸的位置;getDelta傳回距離上次的偏移;

注意;這裡需要綁定腳本到目前節點

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;
    },
           

7: cc.Event: stopPropagationImmediate/stopPropagation 停止事件的傳遞;

事件冒泡: 觸摸事件支援節點樹的事件冒泡,會從目前前天往上一層一層的向父節點傳送;

this.node.on(cc.Node.EventType.TOUCH_START, t => {
            cc.log("cc.Node.EventType.TOUCH_START called");
            // this 函數裡的this  不是綁定this
            
            // 阻止事件冒泡
            t.stopPropagationImmediate(); 
        }, this);
           

鍵盤事件

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，監聽: this.node.on(“自定義事件名稱”, function(target) , this);

2，自派送: emit(“事件名稱”, [detail]); 隻有自己能夠收到;

onLoad: function () {
        // 接收者
        // 事件類型，是你自定義的字元串;
        // 回掉函數: function(e) {} e--> cc.Event.EventCustom的執行個體
        this.node.on("pkg_event", function (e) {
            console.log("pkg_event", e);
        }, this);

        // 派發者,隻能傳遞給自己,不會向上傳遞   
        this.node.emit("pkg_event", { name: "hanbao" });
    },
           

3，冒泡派送: dispatchEvent(new cc.Event.EventCustom(“name”, 是否冒泡傳遞));

onLoad: function () {
        // 接收者
        // 事件類型，是你自定義的字元串;
        // 回掉函數: function(e) {} e--> cc.Event.EventCustom的執行個體
        this.node.on("pkg_event", function (e) {
            console.log("pkg_event", e.detail);
        }, this);
    },
    start: function () {
        this.node.emit("pkg_event", { name: "hanbao" });  //這裡會派發一次給自己
        
        // //這裡派發給全局 發給這個體系;
        // true/false, true向上傳遞, false不向向上傳遞
        var e = new cc.Event.EventCustom("pkg_event", true);
        e.detail = { name: "haobao" };
        this.node.dispatchEvent(e);  
    },
           

特别注意：

派發給自己的 e ， 和派發給全局的 e 是完全不同的

派發給自己的 是傳過來對象 派發給全局的是整個 EventCustom