DOM events and event delegates

DOM event model or DOM event mechanism

The DOM event model is divided into capture and bubbling. Propagation between child elements and parent elements after an event occurs. This spread is divided into three stages.

(1) Capture stage: the stage where the event propagates from the window object top-down (from outside to inside) to the target node;

(2) Target stage: the stage when the real target node is processing events;

(3) Bubbling stage: the stage in which the event propagates from the target node to the window object from the bottom up (from inside to outside), and the reverse process of event capture.

Event broker (Event delegate)

Since events propagate up to the parent node during the bubbling phase, you can define the listener function of the child node on the parent node and let the listener function of the parent node process events of multiple child elements uniformly. This approach is called delegation of events. Scenario 1: To add click events to 100 buttons, each bound to a function, that is very high memory consumption, efficiency requires a lot of performance. Using event agent, we only need to the parent container binding approach, so no matter which a descendant elements, click will according to the transmission mechanism of transmission of bubbling, click behavior triggers the container, and then the corresponding method to carry out, according to the event source, we can know is who, click to do different things. You can listen for dynamic element scenario 2: What if you want to listen for element click events that don’t exist? You can listen for upper-level elements, and when clicked, determine if you want to listen for the elements.