(8) 감청 및 발사 사건

이벤트 모니터링

이벤트 처리는 노드(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);

온 감청을 사용하는 것 외에 우리는once 방법을 사용할 수 있다.once 감청은 감청 함수 응답 후 감청 이벤트를 닫습니다.

감청 해제

우리가 더 이상 어떤 사건에 관심을 가지지 않을 때, 우리는 오프 방법으로 대응하는 감청 사건을 닫을 수 있다.주의해야 할 것은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',
    });
  },
});

배달 사건

위에서 언급한 디스패치 이벤트 방법은 이 방법을 통해 발사된 이벤트는 이벤트 배달 단계에 들어갑니다.Cocos Creator의 이벤트 전송 시스템에서 우리는 거품 전송 방식을 채택한다.거품 전송은 이벤트를 이벤트 시작 노드에서 끊임없이 그의 부급 노드에게 전달하고 루트 노드에 도착하거나 어떤 노드의 응답 함수에서 중단 처리 이벤트를 할 때까지 합니다.stopPropagation(). ![이곳에서 그림의 설명을 입력하십시오][1] 상기 그림에서 보듯이 우리가 노드 c에서 이벤트'foobar'를 보낼 때 노드 a, b가 모두'foobar'사건을 감청하면 이벤트는 c를 통해 차례로 b, a 노드에 전달됩니다.예:

//   c  
this.node.dispatchEvent( new cc.Event.EventCustom('foobar', true) );

만약 우리가 b 노드에서 이벤트를 캡처한 후에 더 이상 이벤트를 전달하지 않기를 원한다면, 우리는 이벤트를 호출할 수 있습니다.stopPropagation() 함수로 완료합니다.구체적인 방법은 다음과 같다.

//   b  
this.node.on('foobar', function (event) {
  event.stopPropagation();
});

사용자 정의 이벤트를 보낼 때 cc를 직접 만들지 마십시오.이벤트 대상, 추상적인 클래스이기 때문에cc를 만드십시오.Event.EventCustom 객체를 배포합니다.

이벤트 객체

이벤트 감청 리셋에서 개발자는 cc를 받을 것입니다.이벤트 유형의 이벤트 대상 이벤트,stopPropagation은 cc입니다.Event의 표준 API, 기타 중요 API는 다음과 같습니다.
API 이름
유형
의미
type
String
이벤트 유형 (이벤트 이름)
target
cc.Node
이벤트에 수신된 원본 객체
currentTarget
cc.Node
이벤트가 수신된 현재 대상, 이벤트가 거품 단계에서 현재 대상은 원시 대상과 다를 수 있습니다
getType
Funciton
이벤트 유형 가져오기
stopPropagation
Function
거품 단계를 멈추면 이벤트는 부모 노드에 계속 전달되지 않고 현재 노드의 나머지 감청기는 이벤트를 수신합니다
stopPropagationImmediate
Function
이벤트의 전달을 즉시 중지합니다. 이벤트는 부모 노드와 현재 노드의 나머지 감청기에 전달되지 않습니다.
getCurrentTarget
Function
현재 이벤트에 수신된 대상 노드 가져오기
detail
Function
사용자 정의 이벤트 정보(cc.Event.EventCustom에 속함)
setUserData
Function
사용자 정의 이벤트에 대한 정보 설정(cc.Event.EventCustom에 속함)
getUserData
Function
사용자 정의 이벤트에 대한 정보 얻기(cc.Event.EventCustom에 속함)
전체 API 목록은 cc를 참조할 수 있습니다.Event 및 하위 클래스의 API 문서입니다.[1]: http://www.cocos.com/docs/creator/scripting/assets/bubble-event.png