Details about javascript event bubbling _ javascript skills

This article mainly introduces javascript event bubbling and javascript implementation code to prevent event bubbling. If you are interested, you can refer to the event as one of the core content in javascript, an important concept is inevitably involved in the application of events, that is, event bubbling. Before introducing event bubbling, we should first introduce another important concept of event stream:
1. What is event stream:
The Document Object Model (DOM) is a tree structure that can be represented in images.

If an html element triggers an event, the event will be transmitted between the trigger node and the root node in the DOM tree in a certain order, and all the nodes that pass through will receive the triggered event, this propagation process is called an event stream. Events can be divided into two categories according to the propagation order. One is event bubbling and the other is event capture. Here we will discuss the topics to be discussed in this chapter:
1. Event bubbling:
The so-called time bubble is when an element triggers an event, the event will be like a bubble, from the trigger element to all its parent nodes, until the root node will receive this event, if the corresponding event handler function is registered in the parent element, even if the event is triggered on the child node, the event handler function registered on the parent element will also be triggered. For example, in the figure above, if the onclick event of Element a is triggered, its parent elements p, document, and widow will receive the event, if the corresponding parent element registers a time-consuming processing function, the event processing function will be executed. Check a code example:

 Simple introduction to event bubbling