DOM event flow event bubble event capture event delegate

DOM Flow of events

Interview questions

• Event delegation , Advantages of event proxies
• The process of event capture and bubbling
• Event bubbling and delegation ？ Use scenarios ？
• JS Principle of event binding
• When to use bubble ？ When to use capture ？

Event bubbling and event capture

Purpose : Solve the flow of events in the page ( Sequence of events ) The problem of

• Event Bubbling ： Deliver events from the inside out
• Event capture ： Pass events from outside to inside

When binding event listening , The third parameter can set the stage at which the event is executed , The default is the event bubble stage

DOM The three phases of the event flow are the capture phase -> Target stage -> bubbling phase .

When the event is in the target stage , The order of event calling depends on the writing order of the bound event

Event agent - Using the event bubbling mechanism

Event agent ： Event broker is to use the mechanism of event bubble or event capture to bind a series of inner element events to outer element events .

The benefits of event delegation

1. Reduce the number of event listening bindings , Reduce memory usage , Lifting performance
2. Added after the bound event pair DOM Node is still valid