詳解CocosCreator系統事件是怎麼產生及觸發的

// 初始化事件系統
_initEvents: function () {
  var win = window, hiddenPropName;

  //_ register system events
  // 註冊系統事件，這裡調用瞭CCInputManager的方法
  if (this.config.registerSystemEvent)
    _cc.inputManager.registerSystemEvent(this.canvas);

  // document.hidden表示頁面隱藏，後面的if用於處理瀏覽器兼容
  if (typeof document.hidden !== 'undefined') {
    hiddenPropName = "hidden";
  } else if (typeof document.mozHidden !== 'undefined') {
    hiddenPropName = "mozHidden";
  } else if (typeof document.msHidden !== 'undefined') {
    hiddenPropName = "msHidden";
  } else if (typeof document.webkitHidden !== 'undefined') {
    hiddenPropName = "webkitHidden";
  }

  // 當前頁面是否隱藏
  var hidden = false;

  // 頁面隱藏時的回調，並發射game.EVENT_HIDE事件
  function onHidden () {
    if (!hidden) {
      hidden = true;
      game.emit(game.EVENT_HIDE);
    }
  }
  //_ In order to adapt the most of platforms the onshow API.
  // 為瞭適配大部分平臺的onshow API。應該是指傳參的部分...
  // 頁面可視時的回調，並發射game.EVENT_SHOW事件
  function onShown (arg0, arg1, arg2, arg3, arg4) {
    if (hidden) {
      hidden = false;
      game.emit(game.EVENT_SHOW, arg0, arg1, arg2, arg3, arg4);
    }
  }

  // 如果瀏覽器支持隱藏屬性，則註冊頁面可視狀態變更事件
  if (hiddenPropName) {
    var changeList = [
      "visibilitychange",
      "mozvisibilitychange",
      "msvisibilitychange",
      "webkitvisibilitychange",
      "qbrowserVisibilityChange"
    ];
    // 循環註冊上面的列表裡的事件，同樣是是為瞭兼容
    // 隱藏狀態變更後，根據可視狀態調用onHidden/onShown回調函數
    for (var i = 0; i < changeList.length; i++) {
      document.addEventListener(changeList[i], function (event) {
        var visible = document[hiddenPropName];
        //_ QQ App
        visible = visible || event["hidden"];
        if (visible)
          onHidden();
        else
          onShown();
      });
    }
  }
  // 此處省略部分關於 頁面可視狀態改變 的兼容性代碼

  // 註冊隱藏和顯示事件，暫停或重新開始遊戲主邏輯。
  this.on(game.EVENT_HIDE, function () {
    game.pause();
  });
  this.on(game.EVENT_SHOW, function () {
    game.resume();
  });
}

// 註冊系統事件 element是canvas
registerSystemEvent (element) {
  if(this._isRegisterEvent) return;

  // 註冊過瞭，直接return
  this._glView = cc.view;
  let selfPointer = this;
  let canvasBoundingRect = this._canvasBoundingRect;

  // 監聽resize事件，修改this._canvasBoundingRect
  window.addEventListener('resize', this._updateCanvasBoundingRect.bind(this));

  let prohibition = sys.isMobile;
  let supportMouse = ('mouse' in sys.capabilities);
  // 是否支持觸摸
  let supportTouches = ('touches' in sys.capabilities);
	
  // 省略瞭鼠標事件的註冊代碼
  
  //_register touch event
  // 註冊觸摸事件
  if (supportTouches) {
    // 事件map
    let _touchEventsMap = {
      "touchstart": function (touchesToHandle) {
        selfPointer.handleTouchesBegin(touchesToHandle);
        element.focus();
      },
      "touchmove": function (touchesToHandle) {
        selfPointer.handleTouchesMove(touchesToHandle);
      },
      "touchend": function (touchesToHandle) {
        selfPointer.handleTouchesEnd(touchesToHandle);
      },
      "touchcancel": function (touchesToHandle) {
        selfPointer.handleTouchesCancel(touchesToHandle);
      }
    };

    // 遍歷map註冊事件
    let registerTouchEvent = function (eventName) {
      let handler = _touchEventsMap[eventName];
      // 註冊事件到canvas上
      element.addEventListener(eventName, (function(event) {
        if (!event.changedTouches) return;
        let body = document.body;

        // 計算偏移量
        canvasBoundingRect.adjustedLeft = canvasBoundingRect.left - (body.scrollLeft || window.scrollX || 0);
        canvasBoundingRect.adjustedTop = canvasBoundingRect.top - (body.scrollTop || window.scrollY || 0);
        // 從事件中獲得觸摸點，並調用回調函數
        handler(selfPointer.getTouchesByEvent(event, canvasBoundingRect));
        // 停止事件冒泡
        event.stopPropagation();
        event.preventDefault();
      }), false);
    };
    for (let eventName in _touchEventsMap) {
      registerTouchEvent(eventName);
    }
  }

  // 修改屬性表示已完成事件註冊
  this._isRegisterEvent = true;
}

// 處理touchstart事件
handleTouchesBegin (touches) {
  let selTouch, index, curTouch, touchID,
      handleTouches = [], locTouchIntDict = this._touchesIntegerDict,
      now = sys.now();
  // 遍歷觸摸點
  for (let i = 0, len = touches.length; i < len; i ++) {
    // 當前觸摸點
    selTouch = touches[i];
    // 觸摸點id
    touchID = selTouch.getID();
    // 觸摸點在觸摸點列表(this._touches)中的位置
    index = locTouchIntDict[touchID];

    // 如果沒有獲得index，說明是個新的觸摸點(剛按下去)
    if (index == null) {
      // 獲得一個沒有被使用的index
      let unusedIndex = this._getUnUsedIndex();
      // 取不到，拋出錯誤。可能是超出瞭支持的最大觸摸點數量。
      if (unusedIndex === -1) {
        cc.logID(2300, unusedIndex);
        continue;
      }
      //_curTouch = this._touches[unusedIndex] = selTouch;
      // 存儲觸摸點
      curTouch = this._touches[unusedIndex] = new cc.Touch(selTouch._point.x, selTouch._point.y, selTouch.getID());
      curTouch._lastModified = now;
      curTouch._setPrevPoint(selTouch._prevPoint);
      locTouchIntDict[touchID] = unusedIndex;
      // 加到需要處理的觸摸點列表中
      handleTouches.push(curTouch);
    }
  }
  // 如果有新觸點，生成一個觸摸事件，分發到eventManager
  if (handleTouches.length > 0) {
    // 這個方法會把觸摸點的位置根據scale做處理
    this._glView._convertTouchesWithScale(handleTouches);
    let touchEvent = new cc.Event.EventTouch(handleTouches);
    touchEvent._eventCode = cc.Event.EventTouch.BEGAN;
    eventManager.dispatchEvent(touchEvent);
  }
},

// 分發事件
_dispatchTouchEvent: function (event) {
  // 為觸摸監聽器排序
  // TOUCH_ONE_BY_ONE：觸摸事件監聽器類型，觸點會一個一個地分開被派發
  // TOUCH_ALL_AT_ONCE：觸點會被一次性全部派發
  this._sortEventListeners(ListenerID.TOUCH_ONE_BY_ONE);
  this._sortEventListeners(ListenerID.TOUCH_ALL_AT_ONCE);

  // 獲得監聽器列表
  var oneByOneListeners = this._getListeners(ListenerID.TOUCH_ONE_BY_ONE);
  var allAtOnceListeners = this._getListeners(ListenerID.TOUCH_ALL_AT_ONCE);

  //_ If there aren't any touch listeners, return directly.
  // 如果沒有任何監聽器，直接return。
  if (null === oneByOneListeners && null === allAtOnceListeners)
    return;

  // 存儲一下變量
  var originalTouches = event.getTouches(), mutableTouches = cc.js.array.copy(originalTouches);
  var oneByOneArgsObj = {event: event, needsMutableSet: (oneByOneListeners && allAtOnceListeners), touches: mutableTouches, selTouch: null};

  //
  //_ process the target handlers 1st
  //  不會翻。感覺是首先處理單個觸點的事件。
  if (oneByOneListeners) {
    // 遍歷觸點，依次分發
    for (var i = 0; i < originalTouches.length; i++) {
      event.currentTouch = originalTouches[i];
      event._propagationStopped = event._propagationImmediateStopped = false;
      this._dispatchEventToListeners(oneByOneListeners, this._onTouchEventCallback, oneByOneArgsObj);
    }
  }

  //
  //_ process standard handlers 2nd
  //  不會翻。感覺是其次處理多觸點事件(一次性全部派發)
  if (allAtOnceListeners && mutableTouches.length > 0) {
    this._dispatchEventToListeners(allAtOnceListeners, this._onTouchesEventCallback, {event: event, touches: mutableTouches});
    if (event.isStopped())
      return;
  }
  // 更新觸摸監聽器列表，主要是移除和新增監聽器
  this._updateTouchListeners(event);
},

/**
* 分發事件到監聽器列表
* @param {*} listeners     監聽器列表
* @param {*} onEvent       事件回調
* @param {*} eventOrArgs   事件/參數
*/
_dispatchEventToListeners: function (listeners, onEvent, eventOrArgs) {
  // 是否需要停止繼續分發
  var shouldStopPropagation = false;
  // 獲得固定優先級的監聽器（系統事件）
  var fixedPriorityListeners = listeners.getFixedPriorityListeners();
  // 獲得場景圖優先級別的監聽器（我們添加的監聽器正常都是在這裡）
  var sceneGraphPriorityListeners = listeners.getSceneGraphPriorityListeners();

  /**
  * 監聽器觸發順序：
  *      固定優先級中優先級 < 0
  *      場景圖優先級別
  *      固定優先級中優先級 > 0
  */
  var i = 0, j, selListener;
  if (fixedPriorityListeners) {  //_ priority < 0
    if (fixedPriorityListeners.length !== 0) {
      // 遍歷監聽器分發事件
      for (; i < listeners.gt0Index; ++i) {
        selListener = fixedPriorityListeners[i];
        // 若 監聽器激活狀態 且 沒有被暫停 且 已被註冊到事件管理器
        // 最後一個onEvent是使用_onTouchEventCallback函數分發事件到監聽器
        // onEvent會返回一個boolean，表示是否需要繼續向後續的監聽器分發事件，若true，停止繼續分發
        if (selListener.isEnabled() && !selListener._isPaused() && selListener._isRegistered() && onEvent(selListener, eventOrArgs)) {
          shouldStopPropagation = true;
          break;
        }
      }
    }
  }
  // 省略另外兩個優先級的觸發代碼
},

// 觸摸事件回調。分發事件到監聽器
_onTouchEventCallback: function (listener, argsObj) {
  //_ Skip if the listener was removed.
  // 若 監聽器已被移除，跳過。
  if (!listener._isRegistered())
    return false;

  var event = argsObj.event, selTouch = event.currentTouch;
  event.currentTarget = listener._node;

  // isClaimed：監聽器是否認領事件
  var isClaimed = false, removedIdx;
  var getCode = event.getEventCode(), EventTouch = cc.Event.EventTouch;
  // 若 事件為觸摸開始事件
  if (getCode === EventTouch.BEGAN) {
    // 若 不支持多點觸摸 且 當前已經有一個觸點瞭
    if (!cc.macro.ENABLE_MULTI_TOUCH && eventManager._currentTouch) {
      // 若 該觸點已被節點認領 且 該節點在節點樹中是激活的，則不處理事件
      let node = eventManager._currentTouchListener._node;
      if (node && node.activeInHierarchy) {
        return false;
      }
    }

    // 若 監聽器有對應事件
    if (listener.onTouchBegan) {
      // 嘗試分發給監聽器，會返回一個boolean，表示監聽器是否認領該事件
      isClaimed = listener.onTouchBegan(selTouch, event);
      // 若 事件被認領 且 監聽器是已被註冊的，保存一些數據
      if (isClaimed && listener._registered) {
        listener._claimedTouches.push(selTouch);
        eventManager._currentTouchListener = listener;
        eventManager._currentTouch = selTouch;
      }
    }
  } 
  // 若 監聽器已有認領的觸點 且 當前觸點正是被當前監聽器認領
  else if (listener._claimedTouches.length > 0
           && ((removedIdx = listener._claimedTouches.indexOf(selTouch)) !== -1)) {
    // 直接領回傢
    isClaimed = true;

    // 若 不支持多點觸摸 且 已有觸點 且 已有觸點還不是當前觸點，不處理事件
    if (!cc.macro.ENABLE_MULTI_TOUCH && eventManager._currentTouch && eventManager._currentTouch !== selTouch) {
      return false;
    }

    // 分發事件給監聽器
    // ENDED或CANCELED的時候，需要清理監聽器和事件管理器中的觸點
    if (getCode === EventTouch.MOVED && listener.onTouchMoved) {
      listener.onTouchMoved(selTouch, event);
    } else if (getCode === EventTouch.ENDED) {
      if (listener.onTouchEnded)
        listener.onTouchEnded(selTouch, event);
      if (listener._registered)
        listener._claimedTouches.splice(removedIdx, 1);
      eventManager._clearCurTouch();
    } else if (getCode === EventTouch.CANCELED) {
      if (listener.onTouchCancelled)
        listener.onTouchCancelled(selTouch, event);
      if (listener._registered)
        listener._claimedTouches.splice(removedIdx, 1);
      eventManager._clearCurTouch();
    }
  }

  //_ If the event was stopped, return directly.
  // 若事件已經被停止傳遞，直接return（對事件調用stopPropagationImmediate()等情況）
  if (event.isStopped()) {
    eventManager._updateTouchListeners(event);
    return true;
  }

  // 若 事件被認領 且 監聽器把事件吃掉瞭(x)（指不需要再繼續傳遞，默認為false，但在Node的touch系列事件中為true）
  if (isClaimed && listener.swallowTouches) {
    if (argsObj.needsMutableSet)
      argsObj.touches.splice(selTouch, 1);
    return true;
  }
  return false;
},

/**
* 在節點上註冊指定類型的回調函數
* @param {*} type          事件類型
* @param {*} callback      回調函數
* @param {*} target        目標(用於綁定this)
* @param {*} useCapture    註冊在捕獲階段
*/
on (type, callback, target, useCapture) {
  // 是否是系統事件（鼠標、觸摸）
  let forDispatch = this._checknSetupSysEvent(type);
  if (forDispatch) {
    // 註冊事件
    return this._onDispatch(type, callback, target, useCapture);
  }
  // 省略掉非系統事件的部分，其中包括瞭位置改變、尺寸改變等。
},

// 註冊分發事件
_onDispatch (type, callback, target, useCapture) {
  //_ Accept also patameters like: (type, callback, useCapture)
  // 也可以接收這樣的參數：(type, callback, useCapture)
  // 參數兼容性處理
  if (typeof target === 'boolean') {
    useCapture = target;
    target = undefined;
  }
  else useCapture = !!useCapture;
  // 若 沒有回調函數，報錯，return。
  if (!callback) {
    cc.errorID(6800);
    return;
  }

  // 根據useCapture獲得不同的監聽器。
  var listeners = null;
  if (useCapture) {
    listeners = this._capturingListeners = this._capturingListeners || new EventTarget();
  }
  else {
    listeners = this._bubblingListeners = this._bubblingListeners || new EventTarget();
  }

  // 若 已註冊瞭相同的回調事件，則不做處理
  if ( !listeners.hasEventListener(type, callback, target) ) {
    // 註冊事件到監聽器
    listeners.on(type, callback, target);

    // 保存this到target的__eventTargets數組裡，用於從target中調用targetOff函數來清除監聽器。
    if (target && target.__eventTargets) {
      target.__eventTargets.push(this);
    }
  }

  return callback;
},

//_註冊事件目標的特定事件類型回調。這種類型的事件應該被 `emit` 觸發。
proto.on = function (type, callback, target, once) {
    // 若 沒有傳遞回調函數，報錯，return
    if (!callback) {
        cc.errorID(6800);
        return;
    }

    // 若 已存在該回調，不處理
    if ( !this.hasEventListener(type, callback, target) ) {
        // 註冊事件
        this.__on(type, callback, target, once);

        if (target && target.__eventTargets) {
            target.__eventTargets.push(this);
        }
    }
    return callback;
};

//_ 事件添加管理
proto.on = function (key, callback, target, once) {
    // 獲得事件對應的回調列表
    let list = this._callbackTable[key];
    // 若 不存在，到池子裡取一個
    if (!list) {
        list = this._callbackTable[key] = callbackListPool.get();
    }
    // 把回調相關信息存起來
    let info = callbackInfoPool.get();
    info.set(callback, target, once);
    list.callbackInfos.push(info);
};

// 檢查是否是系統事件
_checknSetupSysEvent (type) {
  // 是否需要新增監聽器
  let newAdded = false;
  // 是否需要分發（系統事件需要）
  let forDispatch = false;
  // 若 事件是觸摸事件
  if (_touchEvents.indexOf(type) !== -1) {
    // 若 當前沒有觸摸事件監聽器 新建一個
    if (!this._touchListener) {
      this._touchListener = cc.EventListener.create({
        event: cc.EventListener.TOUCH_ONE_BY_ONE,
        swallowTouches: true,
        owner: this,
        mask: _searchComponentsInParent(this, cc.Mask),
        onTouchBegan: _touchStartHandler,
        onTouchMoved: _touchMoveHandler,
        onTouchEnded: _touchEndHandler,
        onTouchCancelled: _touchCancelHandler
      });
      // 將監聽器添加到eventManager
      eventManager.addListener(this._touchListener, this);
      newAdded = true;
    }
    forDispatch = true;
  }
  // 省略事件是鼠標事件的代碼，和觸摸事件差不多
  
  // 若 新增瞭監聽器 且 當前節點不是活躍狀態
  if (newAdded && !this._activeInHierarchy) {
    // 稍後一小會，若節點仍不是活躍狀態，暫停節點的事件傳遞，
    cc.director.getScheduler().schedule(function () {
      if (!this._activeInHierarchy) {
        eventManager.pauseTarget(this);
      }
    }, this, 0, 0, 0, false);
  }
  return forDispatch;
},

// 觸摸開始事件處理器
var _touchStartHandler = function (touch, event) {
    var pos = touch.getLocation();
    var node = this.owner;

    // 若 觸點在節點范圍內，則觸發事件，並返回true，表示這事件我領走啦！
    if (node._hitTest(pos, this)) {
        event.type = EventType.TOUCH_START;
        event.touch = touch;
        event.bubbles = true;
        // 分發到本節點內
        node.dispatchEvent(event);
        return true;
    }
    return false;
};

//_ 分發事件到事件流中。
dispatchEvent (event) {
  _doDispatchEvent(this, event);
  _cachedArray.length = 0;
},
// 分發事件
function _doDispatchEvent (owner, event) {
    var target, i;
    event.target = owner;

    //_ Event.CAPTURING_PHASE
    // 捕獲階段
    _cachedArray.length = 0;
    // 獲得捕獲階段的節點，儲存在_cachedArray
    owner._getCapturingTargets(event.type, _cachedArray);
    //_ capturing
    event.eventPhase = 1;
    // 從尾到頭遍歷(即從根節點到目標節點的父節點)
    for (i = _cachedArray.length - 1; i >= 0; --i) {
        target = _cachedArray[i];
        // 若 目標節點註冊瞭捕獲階段的監聽器
        if (target._capturingListeners) {
            event.currentTarget = target;
            //_ fire event
            // 在目標節點上處理事件
            target._capturingListeners.emit(event.type, event, _cachedArray);
            //_ check if propagation stopped
            // 若 事件已經停止傳遞瞭，return
            if (event._propagationStopped) {
                _cachedArray.length = 0;
                return;
            }
        }
    }
    // 清空_cachedArray
    _cachedArray.length = 0;

    //_ Event.AT_TARGET
    //_ checks if destroyed in capturing callbacks
    // 目標節點本身階段
    event.eventPhase = 2;
    event.currentTarget = owner;
    // 若 自身註冊瞭捕獲階段的監聽器，則處理事件
    if (owner._capturingListeners) {
        owner._capturingListeners.emit(event.type, event);
    }
    // 若 事件沒有被停止 且 自身註冊瞭冒泡階段的監聽器，則處理事件
    if (!event._propagationImmediateStopped && owner._bubblingListeners) {
        owner._bubblingListeners.emit(event.type, event);
    }

    // 若 事件沒有被停止 且 事件需要冒泡處理(默認true)
    if (!event._propagationStopped && event.bubbles) {
        //_ Event.BUBBLING_PHASE
        // 冒泡階段
        // 獲得冒泡階段的節點
        owner._getBubblingTargets(event.type, _cachedArray);
        //_ propagate
        event.eventPhase = 3;
        // 從頭到尾遍歷(實現從父節點到根節點)，觸發邏輯和捕獲階段一致
        for (i = 0; i < _cachedArray.length; ++i) {
            target = _cachedArray[i];
            if (target._bubblingListeners) {
                event.currentTarget = target;
                //_ fire event
                target._bubblingListeners.emit(event.type, event);
                //_ check if propagation stopped
                if (event._propagationStopped) {
                    _cachedArray.length = 0;
                    return;
                }
            }
        }
    }
    // 清空_cachedArray
    _cachedArray.length = 0;
}

_getCapturingTargets (type, array) {
  // 從父節點開始
  var parent = this.parent;
  // 若 父節點不為空(根節點的父節點為空)
  while (parent) {
    // 若 節點有捕獲階段的監聽器 且 有對應類型的監聽事件，則把節點加到array數組中
    if (parent._capturingListeners && parent._capturingListeners.hasEventListener(type)) {
      array.push(parent);
    }
    // 設置節點為其父節點
    parent = parent.parent;
  }
},

proto.emit = function (key, arg1, arg2, arg3, arg4, arg5) {
    // 獲得事件列表
    const list = this._callbackTable[key];
    // 若 事件列表存在
    if (list) {
        // list.isInvoking 事件是否正在觸發
        const rootInvoker = !list.isInvoking;
        list.isInvoking = true;

        // 獲得回調列表，遍歷
        const infos = list.callbackInfos;
        for (let i = 0, len = infos.length; i < len; ++i) {
            const info = infos[i];
            if (info) {
                let target = info.target;
                let callback = info.callback;
                // 若 回調函數是用once註冊的，那先把這個函數取消掉
                if (info.once) {
                    this.off(key, callback, target);
                }

                // 若 傳遞瞭target，則使用call保證this的指向是正確的
                if (target) {
                    callback.call(target, arg1, arg2, arg3, arg4, arg5);
                }
                else {
                    callback(arg1, arg2, arg3, arg4, arg5);
                }
            }
        }
        // 若 當前事件沒有在被觸發
        if (rootInvoker) {
            list.isInvoking = false;
            // 若 含有被取消的回調，則調用purgeCanceled函數，過濾已被移除的回調並壓縮數組
            if (list.containCanceled) {
                list.purgeCanceled();
            }
        }
    }
};

// 場景圖級優先級監聽器的排序算法
// 返回-1(負數)表示l1優先於l2，返回正數則相反，0表示相等
_sortEventListenersOfSceneGraphPriorityDes: function (l1, l2) {
  // 獲得監聽器所在的節點
  let node1 = l1._getSceneGraphPriority(),
      node2 = l2._getSceneGraphPriority();

  // 若 監聽器2為空 或 節點2為空 或 節點2不是活躍狀態 或 節點2是根節點 則l1優先
  if (!l2 || !node2 || !node2._activeInHierarchy || node2._parent === null)
    return -1;
  // 和上面的一樣
  else if (!l1 || !node1 || !node1._activeInHierarchy || node1._parent === null)
    return 1;

  // 使用p1 p2暫存節點1 節點2
  // ex：我推測是 是否發生交換的意思(exchange)
  let p1 = node1, p2 = node2, ex = false;
  // 若 p1 p2的父節不相等 則向上朔源
  while (p1._parent._id !== p2._parent._id) {
    // 若 p1的爺爺節點是空(p1的父節點是根節點) 則ex置為true，p1指向節點2。否則p1指向其父節點
    p1 = p1._parent._parent === null ? (ex = true) && node2 : p1._parent;
    p2 = p2._parent._parent === null ? (ex = true) && node1 : p2._parent;
  }

  // 若 p1和p2指向同一個節點，即節點1、2存在某種父子關系，即情況3
  if (p1._id === p2._id) {
    // 若 p1指向節點2 則l1優先。反之l2優先
    if (p1._id === node2._id) 
      return -1;
    if (p1._id === node1._id)
      return 1;
  }

  // 註：此時p1 p2的父節點相同
  // 若ex為true 則節點1、2沒有父子關系，即情況2
  // 若ex為false 則節點1、2父節點相同，即情況1
  return ex ? p1._localZOrder - p2._localZOrder : p2._localZOrder - p1._localZOrder;
},