Event delegate (alias: Event delegate) : That is, the parent delegates to the child, and the child delegates to the parent (term relativity)

  • Concept: by binding the child’s listening events to the parent’s listening events
  • How it works: Events bubble up
  • Function:
    • Save memory
    • It is easy to assign click-response events, namely dynamically bound events, to subsequent subitems
  • Get the DOM element clicked by ev.target. You can also determine that the ev.target element does not respond to a click on a certain type of tag, such as the SPAN tag
  • Use the sample

DOM event handling mechanism

The DOM event handling mechanism consists of three parts:

  1. Event capture

When a DOM element fires an event (such as a click event), the top-level object Document sends a stream of events down the DOM tree to the target element node, and the rest of the elements’ listening events are not fired during the capture phase while reaching the target element.

  1. Target event processing

After the target element node is captured, the corresponding listener function is executed.

  1. Event bubbling (the flow of events flows in the opposite direction of the event capture phase)

Once the target element node is fired, the event stream proceeds from the target element node up the DOM tree toward the top-level element Document, firing corresponding DOM element listening events along the way

A term derived from the DOM's event handling mechanism: event delegate/event broker, the principle of which is event bubbling