Detailed explanation of how CocosCreator system events are generated and triggered

// Initialize event system_initEvents: function () {
  var win = window, hiddenPropName;

  //_ register system events
  // Register system events, here we call the CCInputManager method if (this.config.registerSystemEvent)
    _cc.inputManager.registerSystemEvent(this.canvas);

  // document.hidden means the page is hidden, the following if is used to handle browser compatibility 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";
  }

  // Is the current page hidden? var hidden = false;

  //Callback when the page is hidden and emits the game.EVENT_HIDE event function onHidden () {
    if (!hidden) {
      hidden = true;
      game.emit(game.EVENT_HIDE);
    }
  }
  //_ In order to adapt the most of platforms the onshow API.
  // To adapt to the onshow API of most platforms. It should refer to the parameter passing part...
  // Callback when the page is visible and emit game.EVENT_SHOW event function onShown (arg0, arg1, arg2, arg3, arg4) {
    if (hidden) {
      hidden = false;
      game.emit(game.EVENT_SHOW, arg0, arg1, arg2, arg3, arg4);
    }
  }

  // If the browser supports hidden properties, register the page visual state change event if (hiddenPropName) {
    var changeList = [
      "visibilitychange",
      "mozvisibilitychange",
      "msvisibilitychange",
      "webkitvisibilitychange",
      "qbrowserVisibilityChange"
    ];
    // Loop through the events in the list above for compatibility // After the hidden state changes, call the onHidden/onShown callback function based on the visible state 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();
      });
    }
  }
  // Some compatibility codes about changes in the page's visual state are omitted here // Register hide and show events, and pause or restart the main logic of the game.
  this.on(game.EVENT_HIDE, function () {
    game.pause();
  });
  this.on(game.EVENT_SHOW, function () {
    game.resume();
  });
}

// Register system event element is canvas
registerSystemEvent (element) {
  if(this._isRegisterEvent) return;

  // Already registered, return directly
  this._glView = cc.view;
  let selfPointer = this;
  let canvasBoundingRect = this._canvasBoundingRect;

  // Listen for resize events and modify this._canvasBoundingRect
  window.addEventListener('resize', this._updateCanvasBoundingRect.bind(this));

  let prohibition = sys.isMobile;
  let supportMouse = ('mouse' in sys.capabilities);
  // Whether to support touchlet supportTouches = ('touches' in sys.capabilities);
	
  // Omitted the registration code for mouse events //_register touch event
  // Register touch events if (supportTouches) {
    // Event 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);
      }
    };

    // Traverse the map to register events let registerTouchEvent = function (eventName) {
      let handler = _touchEventsMap[eventName];
      // Register events to canvas element.addEventListener(eventName, (function(event) {
        if (!event.changedTouches) return;
        let body = document.body;

        // Calculate the offset canvasBoundingRect.adjustedLeft = canvasBoundingRect.left - (body.scrollLeft || window.scrollX || 0);
        canvasBoundingRect.adjustedTop = canvasBoundingRect.top - (body.scrollTop || window.scrollY || 0);
        // Get the touch point from the event and call the callback function handler(selfPointer.getTouchesByEvent(event, canvasBoundingRect));
        // Stop event bubbling event.stopPropagation();
        event.preventDefault();
      }), false);
    };
    for (let eventName in _touchEventsMap) {
      registerTouchEvent(eventName);
    }
  }

  // Modify the property to indicate that event registration has been completed this._isRegisterEvent = true;
}

// Handle the touchstart event handleTouchesBegin (touches) {
  let selTouch, index, curTouch, touchID,
      handleTouches = [], locTouchIntDict = this._touchesIntegerDict,
      now = sys.now();
  // Traverse touch points for (let i = 0, len = touches.length; i < len; i ++) {
    // Current touch point selTouch = touches[i];
    // Touch point id
    touchID = selTouch.getID();
    // The position of the touch point in the touch point list (this._touches) index = locTouchIntDict[touchID];

    // If the index is not obtained, it means it is a new touch point (just pressed)
    if (index == null) {
      // Get an unused index
      let unusedIndex = this._getUnUsedIndex();
      // Cannot obtain, throw an error. It may be that the maximum number of supported touch points has been exceeded.
      if (unusedIndex === -1) {
        cc.logID(2300, unusedIndex);
        continue;
      }
      //_curTouch = this._touches[unusedIndex] = selTouch;
      //Store touch points 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;
      // Add to the list of touch points that need to be processed handleTouches.push(curTouch);
    }
  }
  // If there is a new contact, generate a touch event and distribute it to the eventManager
  if (handleTouches.length > 0) {
    // This method will process the position of the touch point according to the scale this._glView._convertTouchesWithScale(handleTouches);
    let touchEvent = new cc.Event.EventTouch(handleTouches);
    touchEvent._eventCode = cc.Event.EventTouch.BEGAN;
    eventManager.dispatchEvent(touchEvent);
  }
},

// Dispatching events_dispatchTouchEvent: function (event) {
  // Sort touch listeners // TOUCH_ONE_BY_ONE: touch event listener type, touch points will be dispatched one by one // TOUCH_ALL_AT_ONCE: touch points will be dispatched all at once this._sortEventListeners(ListenerID.TOUCH_ONE_BY_ONE);
  this._sortEventListeners(ListenerID.TOUCH_ALL_AT_ONCE);

  // Get the listener list 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.
  // If there is no listener, just return.
  if (null === oneByOneListeners && null === allAtOnceListeners)
    return;

  // Store variables 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
  // Won't flip. The feeling is to handle single touch events first.
  if (oneByOneListeners) {
    // Traverse the contacts and distribute them in sequence 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
  // Won't flip. It feels like the second thing is to handle multi-touch events (dispatching all at once)
  if (allAtOnceListeners && mutableTouches.length > 0) {
    this._dispatchEventToListeners(allAtOnceListeners, this._onTouchesEventCallback, {event: event, touches: mutableTouches});
    if (event.isStopped())
      return;
  }
  // Update the touch listener list, mainly to remove and add listeners this._updateTouchListeners(event);
},

/**
* Distribute events to listener lists * @param {*} listeners listener list * @param {*} onEvent event callback * @param {*} eventOrArgs event/parameters */
_dispatchEventToListeners: function (listeners, onEvent, eventOrArgs) {
  //Do you need to stop distributing? var shouldStopPropagation = false;
  // Get a fixed priority listener (system event)
  var fixedPriorityListeners = listeners.getFixedPriorityListeners();
  // Get the listener with scene graph priority (normally the listeners we add are here)
  var sceneGraphPriorityListeners = listeners.getSceneGraphPriorityListeners();

  /**
  * Listener triggering order:
  * Fixed priority level < 0
  * Scene graph priority * Fixed priority > 0
  */
  var i = 0, j, selListener;
  if (fixedPriorityListeners) { //_ priority < 0
    if (fixedPriorityListeners.length !== 0) {
      // Traverse the listeners to distribute events for (; i < listeners.gt0Index; ++i) {
        selListener = fixedPriorityListeners[i];
        // If the listener is activated and not paused and has been registered with the event manager // The last onEvent is to use the _onTouchEventCallback function to distribute events to the listener // onEvent will return a boolean, indicating whether it is necessary to continue to distribute events to subsequent listeners. If true, stop distributing if (selListener.isEnabled() && !selListener._isPaused() && selListener._isRegistered() && onEvent(selListener, eventOrArgs)) {
          shouldStopPropagation = true;
          break;
        }
      }
    }
  }
  //Omit the trigger codes of the other two priorities},

// Touch event callback. Distribute events to listeners_onTouchEventCallback: function (listener, argsObj) {
  //_ Skip if the listener was removed.
  // Skip if the listener has been removed.
  if (!listener._isRegistered())
    return false;

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

  // isClaimed: listener whether to claim the event var isClaimed = false, removedIdx;
  var getCode = event.getEventCode(), EventTouch = cc.Event.EventTouch;
  // If the event is a touch start event if (getCode === EventTouch.BEGAN) {
    // If multi-touch is not supported and there is already a touch point if (!cc.macro.ENABLE_MULTI_TOUCH && eventManager._currentTouch) {
      // If the touch point has been claimed by a node and the node is active in the node tree, the event will not be processed let node = eventManager._currentTouchListener._node;
      if (node ​​&& node.activeInHierarchy) {
        return false;
      }
    }

    // If the listener has a corresponding event if (listener.onTouchBegan) {
      // Try to distribute to the listener, and return a boolean to indicate whether the listener claims the event isClaimed = listener.onTouchBegan(selTouch, event);
      // If the event is claimed and the listener is registered, save some data if (isClaimed && listener._registered) {
        listener._claimedTouches.push(selTouch);
        eventManager._currentTouchListener = listener;
        eventManager._currentTouch = selTouch;
      }
    }
  } 
  // If the listener has already claimed a touch and the current touch is claimed by the current listener else if (listener._claimedTouches.length > 0
           && ((removedIdx = listener._claimedTouches.indexOf(selTouch)) !== -1)) {
    // Take it home directly isClaimed = true;

    // If multi-touch is not supported and there is a touch point and it is not the current touch point, do not process the event if (!cc.macro.ENABLE_MULTI_TOUCH && eventManager._currentTouch && eventManager._currentTouch !== selTouch) {
      return false;
    }

    // Distribute events to listeners // When ENDED or CANCELED, you need to clean up the contacts in the listener and event manager 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.
  // If the event has been stopped, return directly (call stopPropagationImmediate() on the event, etc.)
  if (event.isStopped()) {
    eventManager._updateTouchListeners(event);
    return true;
  }

  // If the event is claimed and the listener eats the event (x) (it does not need to be passed on, the default is false, but it is true in Node's touch series events)
  if (isClaimed && listener.swallowTouches) {
    if (argsObj.needsMutableSet)
      argsObj.touches.splice(selTouch, 1);
    return true;
  }
  return false;
},

/**
* Register a callback function of the specified type on the node * @param {*} type event type * @param {*} callback callback function * @param {*} target target (used to bind this)
* @param {*} useCapture registered in the capture phase */
on (type, callback, target, useCapture) {
  // Is it a system event (mouse, touch)?
  let forDispatch = this._checknSetupSysEvent(type);
  if (forDispatch) {
    //Register event return this._onDispatch(type, callback, target, useCapture);
  }
  // Omit non-system events, including position changes, size changes, etc.
},

// Register distribution event_onDispatch (type, callback, target, useCapture) {
  //_ Accept also patameters like: (type, callback, useCapture)
  // You can also receive parameters like this: (type, callback, useCapture)
  // Parameter compatibility processing if (typeof target === 'boolean') {
    useCapture = target;
    target = undefined;
  }
  else useCapture = !!useCapture;
  // If there is no callback function, report an error and return.
  if (!callback) {
    cc.errorID(6800);
    return;
  }

  // Get different listeners based on useCapture.
  var listeners = null;
  if (useCapture) {
    listeners = this._capturingListeners = this._capturingListeners || new EventTarget();
  }
  else {
    listeners = this._bubblingListeners = this._bubblingListeners || new EventTarget();
  }

  // If the same callback event has been registered, no processing will be performed if ( !listeners.hasEventListener(type, callback, target) ) {
    // Register events to listeners listeners.on(type, callback, target);

    // Save this to the target's __eventTargets array, which is used to call the targetOff function from the target to clear the listener.
    if (target && target.__eventTargets) {
      target.__eventTargets.push(this);
    }
  }

  return callback;
},

//_Register a specific event type callback for the event target. Events of this type should be emitted using `emit`.
proto.on = function (type, callback, target, once) {
    // If no callback function is passed, report an error and return
    if (!callback) {
        cc.errorID(6800);
        return;
    }

    // If the callback already exists, do not process if ( !this.hasEventListener(type, callback, target) ) {
        //Register event this.__on(type, callback, target, once);

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

//_ Event adding management proto.on = function (key, callback, target, once) {
    // Get the callback list corresponding to the event let list = this._callbackTable[key];
    // If it does not exist, get one from the pool if (!list) {
        list = this._callbackTable[key] = callbackListPool.get();
    }
    // Save callback related information let info = callbackInfoPool.get();
    info.set(callback, target, once);
    list.callbackInfos.push(info);
};

// Check if it is a system event_checknSetupSysEvent (type) {
  // Do you need to add a new listener? let newAdded = false;
  // Whether distribution is needed (required for system events)
  let forDispatch = false;
  // If the event is a touch event if (_touchEvents.indexOf(type) !== -1) {
    // If there is no touch event listener, create a new one 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
      });
      // Add the listener to the eventManager
      eventManager.addListener(this._touchListener, this);
      newAdded = true;
    }
    forDispatch = true;
  }
  // The omitted event is the code for the mouse event, which is similar to the touch event // If a listener is added and the current node is not active if (newAdded && !this._activeInHierarchy) {
    // After a while, if the node is still not active, suspend the event delivery of the node.
    cc.director.getScheduler().schedule(function () {
      if (!this._activeInHierarchy) {
        eventManager.pauseTarget(this);
      }
    }, this, 0, 0, 0, false);
  }
  return forDispatch;
},

// Touch start event handler var _touchStartHandler = function (touch, event) {
    var pos = touch.getLocation();
    var node = this.owner;

    // If the touch point is within the node range, the event is triggered and true is returned, indicating that I have taken the event!
    if (node._hitTest(pos, this)) {
        event.type = EventType.TOUCH_START;
        event.touch = touch;
        event.bubbles = true;
        //Distribute to this nodenode.dispatchEvent(event);
        return true;
    }
    return false;
};

//_ Distribute events into the event stream.
dispatchEvent (event) {
  _doDispatchEvent(this, event);
  _cachedArray.length = 0;
},
//Distribute events function _doDispatchEvent (owner, event) {
    var target, i;
    event.target = owner;

    //_ Event.CAPTURING_PHASE
    // Capture phase_cachedArray.length = 0;
    // Get the nodes in the capture phase and store them in _cachedArray
    owner._getCapturingTargets(event.type, _cachedArray);
    //_ capturing
    event.eventPhase = 1;
    //Traverse from the end to the beginning (that is, from the root node to the parent node of the target node)
    for (i = _cachedArray.length - 1; i >= 0; --i) {
        target = _cachedArray[i];
        // If the target node registers a listener for the capture phase if (target._capturingListeners) {
            event.currentTarget = target;
            //_ fire event
            // Process the event on the target node target._capturingListeners.emit(event.type, event, _cachedArray);
            //_ check if propagation stopped
            // If the event has stopped being delivered, return
            if (event._propagationStopped) {
                _cachedArray.length = 0;
                return;
            }
        }
    }
    // Clear_cachedArray
    _cachedArray.length = 0;

    //_ Event.AT_TARGET
    //_ checks if destroyed in capturing callbacks
    // The target node's own phase event.eventPhase = 2;
    event.currentTarget = owner;
    // If the owner has registered a listener for the capture phase, process the event if (owner._capturingListeners) {
        owner._capturingListeners.emit(event.type, event);
    }
    // If the event is not stopped and the propagation listener is registered, process the event if (!event._propagationImmediateStopped && owner._bubblingListeners) {
        owner._bubblingListeners.emit(event.type, event);
    }

    // If the event is not stopped and the event needs to be bubbled (default true)
    if (!event._propagationStopped && event.bubbles) {
        //_ Event.BUBBLING_PHASE
        // Bubbling stage // Get the node in the bubbling stage owner._getBubblingTargets(event.type, _cachedArray);
        //_ propagate
        event.eventPhase = 3;
        // Traverse from beginning to end (from parent node to root node), the triggering logic is consistent with the capture phase 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;
                }
            }
        }
    }
    // Clear_cachedArray
    _cachedArray.length = 0;
}

_getCapturingTargets (type, array) {
  // Start from the parent node var parent = this.parent;
  // If the parent node is not empty (the parent node of the root node is empty)
  while (parent) {
    // If the node has a listener in the capture phase and a listening event of the corresponding type, add the node to the array if (parent._capturingListeners && parent._capturingListeners.hasEventListener(type)) {
      array.push(parent);
    }
    // Set the node to its parent node parent = parent.parent;
  }
},

proto.emit = function (key, arg1, arg2, arg3, arg4, arg5) {
    // Get the event list const list = this._callbackTable[key];
    // If the event list exists if (list) {
        // Is the list.isInvoking event being triggered const rootInvoker = !list.isInvoking;
        list.isInvoking = true;

        // Get the callback list and traverse 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;
                // If the callback function is registered with once, cancel this function first if (info.once) {
                    this.off(key, callback, target);
                }

                // If target is passed, use call to ensure that this points to the correct if (target) {
                    callback.call(target, arg1, arg2, arg3, arg4, arg5);
                }
                else {
                    callback(arg1, arg2, arg3, arg4, arg5);
                }
            }
        }
        // If the current event is not being triggered if (rootInvoker) {
            list.isInvoking = false;
            // If there are canceled callbacks, call the purgeCanceled function to filter the removed callbacks and compress the array if (list.containCanceled) {
                list.purgeCanceled();
            }
        }
    }
};

// Sorting algorithm for scene graph priority listeners // Returning -1 (negative number) means l1 takes precedence over l2, returning a positive number means the opposite, 0 means they are equal_sortEventListenersOfSceneGraphPriorityDes: function (l1, l2) {
  // Get the node where the listener is located let node1 = l1._getSceneGraphPriority(),
      node2 = l2._getSceneGraphPriority();

  // If listener 2 is empty or node 2 is empty or node 2 is not active or node 2 is the root node, l1 takes precedence if (!l2 || !node2 || !node2._activeInHierarchy || node2._parent === null)
    return -1;
  // Same as above else if (!l1 || !node1 || !node1._activeInHierarchy || node1._parent === null)
    return 1;

  // Use p1 p2 to temporarily store node 1 and node 2
  // ex: I guess it means whether an exchange occurs (exchange)
  let p1 = node1, p2 = node2, ex = false;
  // If the parent nodes of p1 and p2 are not equal, trace back to the source while (p1._parent._id !== p2._parent._id) {
    // If the grandparent node of p1 is empty (the parent node of p1 is the root node), ex is set to true and p1 points to node 2. Otherwise p1 points to its parent node p1 = p1._parent._parent === null ? (ex = true) && node2 : p1._parent;
    p2 = p2._parent._parent === null ? (ex = true) && node1 : p2._parent;
  }

  // If p1 and p2 point to the same node, that is, nodes 1 and 2 have a parent-child relationship, that is, case 3
  if (p1._id === p2._id) {
    // If p1 points to node 2, l1 takes precedence. Otherwise l2 takes precedence if (p1._id === node2._id) 
      return -1;
    if (p1._id === node1._id)
      return 1;
  }

  // Note: At this time, the parent nodes of p1 and p2 are the same // If ex is true, then nodes 1 and 2 have no parent-child relationship, that is, case 2
  // If ex is false, nodes 1 and 2 have the same parent node, which is case 1
  return ex ? p1._localZOrder - p2._localZOrder : p2._localZOrder - p1._localZOrder;
},