Event bubbling and capturing

1. Understand event bubbling and event capture

In JS, we call the order in which events occur as "event flow". When an event is triggered, a series of chain reactions will occur

  
   
   
<div class="grandpa">
i am grandpa div
<p class="son">
i am son p
< a class = "grandson" href = "#" > I am grandson a </ a >
</p>
</div>
  
   
   

If you bind an event to each tag, when you click on the <a> tag, you will find that the events bound to the <div> and <p> tags will also be triggered. Why? To answer this question, Microsoft and Netscape proposed two different concepts: event capture and event bubbling

(1) Event capture: Proposed by Microsoft Corporation, the event flows from the document root node (Document object) to the target node, passing through each parent node of the target node on the way, and triggering capture events on these nodes until reaching the event's target node

(2) Event bubbling: proposed by Netscape, contrary to event capture, the event will flow from the target node to the root node of the document, passing through each parent node of the target node on the way, and triggering capture events on these nodes until reaching The root node of the document. The whole process is like air bubbles in water, moving upward from the bottom of the water

Tips: The target node mentioned above refers to the node that triggers the event

Later, in order to unify the standard, W3C adopted a compromise method, which is to combine event capture with event bubbling, which is now "capture first and then bubble", as shown in the following figure:

2. Event capturing (event capturing)

In the event capture phase, the event starts from the outermost layer of the DOM tree, passes through each parent node of the target node in turn, and triggers the event on the parent node until it reaches the target node of the event. Take the code in the above picture as an example, if you click the <a> tag,

Then the event will be delivered to the <a> tag in the order of document -> div -> p -> a.

 expand:

element.addEventListener(event, function, useCapture)

The addEventListener method is used to bind an event processing function for a specific element. There are three parameters, which are " event type without on", "event processing function", and "control event phase ". The third parameter is boolean type. The default is false, which means that the event processing function is called during the event bubbling phase. Passing true as in the above code means that the event processing function is called during the event capture phase.

3. Event bubbling

Event bubbling is just the opposite of event capturing. Event bubbling starts from the target node, goes up along the parent node, and triggers the event on the parent node until the document root node, just like a bubble at the bottom of the water, will always go up .

  4. Prevent event capture and bubbling

After understanding event capture and event bubbling, you will find that this feature is not friendly. For example, we bound an event on a certain node and wanted to trigger this event when we clicked. As a result, due to event bubbling, the event of this node was Its child elements are triggered. How do we prevent this from happening?

The stopPropagation() method is provided in JS to prevent event capture and event bubbling. The syntax is as follows:

event.stopPropagation();
  
   
   

Note: stopPropagation() will prevent event capture and event bubbling, but it cannot prevent the default behavior of the label. For example, clicking a link can still open the corresponding web page.

 In addition, you can use the stopImmediatePropagation() method to prevent other event handlers for the same event of the same node. For example, if multiple click events are defined for a node, when the event is triggered, these events will be executed sequentially in the defined order. If If the stopImmediatePropagation() method is used in an event handler, the remaining event handlers will not be executed.

The syntax format is as follows:

event.stopImmediatePropagation();
  
   
   

Example:

 

5. Block default actions

Some events have default actions associated with them, for example: when a link is clicked, it will automatically jump to the specified page, when the submit button is clicked, data will be submitted to the server, etc. If you don't want such a default operation to happen, you can use the preventDefault() method to prevent it. The syntax is as follows:

event.preventDefault();
  
   
   

Example:

Note: IE9 and below versions do not support the preventDefault() method, for IE9 and below browsers you can use event.returnValue = false;