Understanding Event Bubbling

One, what is event bubbling

Events are some kind of state or behavior used to trigger JS code, which is the bridge between HTML implementation and JS interaction. An event must be installed on an object, such as an element in a browser or document, or an event cannot exist. Imagine that if you do not bind an event such as Click () or MouseMove () to an object (event target), the Web page will not respond to any of the mouse clicks. So the question is, when an event occurs, how does the browser determine who the event happened to? For example, click on the son area, which is the son of the point, or dad, or grandpa? Because of the large number of nested relationships in HTML, it is necessary to specify a certain order to query exactly who binds the event, so that the corresponding JS can be triggered. This order is called the "event Flow", and event bubbling is a type of event flow.

Ii. three types of event streams

1, event bubbling. Start with the most specific node where the event occurred, and then query up and down the DOM tree until body, HTML, and document. Still consider, if grandpa bound a click event, click Grandpa Middle Area, the browser is not directly triggered Grandpa events, the browser only know that son was in the point, and began to query: Son has no binding click, Dad has no binding click , grandpa there is no binding click......document there is no binding click. All the elements in the same DOM kinship chain will be checked once, and all the click will be triggered.

2, event capture. Just the opposite of event bubbling, not specifically unfolded.

3. Dom Event stream. The DOM event flow prescribes three stages: capture, target, and bubbling. As for why this was designed, I didn't find it in JavaScript advanced programming and the JavaScript authoritative guide. Therefore, further research is needed.

Iii. Commission of events

With event bubbling, the event is bound to the parent element so that all child elements can use the parent element's events to trigger the execution of the JS code, which is the event delegate (or the event proxy). The advantage of this is that it consumes less memory than adding the same events to each element individually.

Iv. Blocking Bubbles

Use Stoppropagation () to intercept event bubbling.

If you do not block, click the Son area, the browser will pop up three boxes, stop bubbling, will only appear once:

V. What events support bubbling and which do not support

Cond......

Understanding Event Bubbling