The order of events
Suppose another element is nested in one element and both have an onClick event handler. If the user clicks on element 2, the click events of element 1 and element 2 are triggered. But which event is triggered first? Which event handler function will be executed first? In other words, what is the order in which events occur? As shown in the figure below, when the span element area is clicked, the three click events will be triggered, but what is the order?
<div onclick="func1"> <p onclick="func2"> <span onclick=""func3> </span> </p> </div>
Two models
Netscape and Microsoft have two completely different methods of handling this event:
•Netscape advocates that events will occur from the outermost layer to the most specific element, and this sequence of events is called capture type
•Microsoft keeps events from the innermost element and then spreads upwards. This sequence of events is called bubble type
The order of these two events is completely opposite. The Explorer browser only supports bubble events, both Mozilla, Opera7 and Konqueror. The older opera and iCab support neither
w3c
Any event that occurs in the w3c event model first enters the capture stage until the target element is reached and then enters the bubble stage.
For normal web development, you can choose whether to bind the event handler function in the capture stage or the bubble stage. This is achieved through the addEventListener() method. If the useCapture parameter of this function is true, the function is bound in the capture stage, and vice versa, the function is bound in the bubble stage.
element.addEventListener(event, function, useCapture)
Stop bubbles
During normal development, if you want to prevent the spread of events, you can do it through one method.
In Microsoft's model, you have to set the cancelBubble property of the event to true
window.event.cancelBubble = true
In the w3c model you have to call the stopPropagation() method of the event
e.stopPropagation()
Calling these methods will prevent all bubbles from spreading outward. Cross-browser solution:
function doSomething(e) { if (!e) { var e = window.event; e.cancelBubble = true; } if (e.stopPropagation) { e.stopPropagation(); }}The above article in-depth understanding of event bubbles and event capture is all the content I have shared with you. I hope it can give you a reference and I hope you can support Wulin.com more.