One or three stages
According to the type of event flow, the entire process of event propagation can be divided into 3 stages, which are as follows:
- In the event capture phase
, the root node document of the document goes to the event trigger object, and the event object is captured from the outside to the inside. - The target stage (the event program of the target object itself)
reaches the target event location and triggers the program content of the event itself; - Event bubbling stage 1
then traces back from the target event location to the root node of the document, bubbling the event object from the inside to the outside.
2. Event propagation process
Features: Start from the document object, and finally return to the document object to end.
Essentially, the event first traverses down the parent element until it reaches the target element (capture phase) .
When the event reaches the target, it will be triggered there (target phase) .
Then return to the chain (bubbling phase), and call the handler all the way
Three, examples
The target element refers to the exact location where the event is triggered.
For example, if you click <div>in the middle <button>, the corresponding <button>mark will become the target. This element can event.targetbe accessed as, and will not change during the entire stage of event propagation.
The blue arrow represents the capture process, and the purple arrow represents the bubbling process:
(1) All modern browsers support event bubbling, but there are slight differences in the specific implementation. In IE5.5 and earlier versions, event bubbling will skip elements (jump directly from body to document). IE9, Firefox, Chrome, and Safari bubble events all the way to the window object.
(2) IE9, Firefox, Chrome, Opera, and Safari all support event capture. Although the DOM standard requires that events should be propagated from the document object, these browsers capture events from the window object.
(3) Since older browsers do not support it, very few people use event capture. It is recommended to use event bubbling. There are special circumstances to reuse capture. ↩︎
One or three stages
According to the type of event flow, the entire process of event propagation can be divided into 3 stages, which are as follows:
- In the event capture phase
, the root node document of the document goes to the event trigger object, and the event object is captured from the outside to the inside. - The target stage (the event program of the target object itself)
reaches the target event location and triggers the program content of the event itself; - Event bubbling stage 1
then traces back from the target event location to the root node of the document, bubbling the event object from the inside to the outside.
2. Event propagation process
Features: Start from the document object, and finally return to the document object to end.
Essentially, the event first traverses down the parent element until it reaches the target element (capture phase) .
When the event reaches the target, it will be triggered there (target phase) .
Then return to the chain (bubbling phase), and call the handler all the way
Three, examples
The target element refers to the exact location where the event is triggered.
For example, if you click <div>in the middle <button>, the corresponding <button>mark will become the target. This element can event.targetbe accessed as, and will not change during the entire stage of event propagation.
The blue arrow represents the capture process, and the purple arrow represents the bubbling process:
(1) All modern browsers support event bubbling, but there are slight differences in the specific implementation. In IE5.5 and earlier versions, event bubbling will skip elements (jump directly from body to document). IE9, Firefox, Chrome, and Safari bubble events all the way to the window object.
(2) IE9, Firefox, Chrome, Opera, and Safari all support event capture. Although the DOM standard requires that events should be propagated from the document object, these browsers capture events from the window object.
(3) Since older browsers do not support it, very few people use event capture. It is recommended to use event bubbling. There are special circumstances to reuse capture. ↩︎