1. 程式人生 > >cocos creator 發射監聽事件

cocos creator 發射監聽事件

監聽和發射事件

監聽事件

事件處理是在節點(cc.Node)中完成的。對於元件,可以通過訪問節點 this.node 來註冊和監聽事件。監聽事件可以 通過this.node.on() 函式來註冊,方法如下:

cc.Class({
  extends: cc.Component,

  properties: {
  },

  onLoad: function () {
    this.node.on('mousedown', function ( event ) {
      console.log('Hello!');
    });
  },  
});

值得一提的是,事件監聽函式 on 可以傳第三個引數 target,用於繫結響應函式的呼叫者。以下兩種呼叫方式, 效果上是相同的:

// 使用函式繫結
this.node.on('mousedown', function ( event ) {
  this.enabled = false;
}.bind(this));

// 使用第三個引數
this.node.on('mousedown', function (event) {
  this.enabled = false;
}, this);

除了使用 on 監聽,我們還可以使用 once 方法。once 監聽在監聽函式響應後就會關閉監聽事件。

關閉監聽

當我們不再關心某個事件時,我們可以使用 off 方法關閉對應的監聽事件。需要注意的是,off 方法的 引數必須和 on 方法的引數一一對應,才能完成關閉。

我們推薦的書寫方法如下:

cc.Class({
  extends: cc.Component,

  _sayHello: function () {
    console.log('Hello World');
  },

  onEnable: function () {
    this.node.on('foobar', this._sayHello, this);
  },

  onDisable: function () {
    this.node.off('foobar', this._sayHello, this);
  },
});

發射事件

我們可以通過兩種方式發射事件:emit

 和 dispatchEvent。兩者的區別在於,後者可以做事件傳遞。 我們先通過一個簡單的例子來了解 emit 事件:

cc.Class({
  extends: cc.Component,

  onLoad: function () {
    this.node.on('say-hello', function (event) {
      console.log(event.detail.msg);
    });
  },

  start: function () {
    this.node.emit('say-hello', {
      msg: 'Hello, this is Cocos Creator',
    });
  },
});

派送事件

上文提到了 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物件來進行派發。

事件物件

在事件監聽回撥中,開發者會接收到一個 cc.Event 型別的事件物件 eventstopPropagation 就是 cc.Event 的標準 API,其它重要的 API 包含:

API 名型別意義
typeString事件的型別(事件名)
targetcc.Node接收到事件的原始物件
currentTargetcc.Node接收到事件的當前物件,事件在冒泡階段當前物件可能與原始物件不同
getTypeFunciton獲取事件的型別
stopPropagationFunction停止冒泡階段,事件將不會繼續向父節點傳遞,當前節點的剩餘監聽器仍然會接收到事件
stopPropagationImmediateFunction立即停止事件的傳遞,事件將不會傳給父節點以及當前節點的剩餘監聽器
getCurrentTargetFunction獲取當前接收到事件的目標節點
detailFunction自定義事件的資訊(屬於 cc.Event.EventCustom
setUserDataFunction設定自定義事件的資訊(屬於 cc.Event.EventCustom
getUserDataFunction獲取自定義事件的資訊(屬於 cc.Event.EventCustom

完整的 API 列表可以參考 cc.Event 及其子類的 API 文件。

系統內建事件

以上是通用的事件監聽和發射規則,在 Cocos Creator 中為 cc.Node 內建了滑鼠、觸控等系統事件,可參考系統內建事件文件