Home > Developer > JavaScript
As browsers evolve into the fourth generation (IE4 and Netscape Communicator 4), the browser team encounters an interesting question: which part of the page will have a specific event? Imagine having a set of concentric circles on a piece of paper, if you put your finger on the center of the circle, then your finger is pointing not to a circle, but to a group of circles. The development teams of two companies are consistent in their view of browser events. If you click a button, you also click the button's container element, or even the entire page.
The event flow describes the order in which events are accepted from the page. But interestingly, the IE and Netscape development team actually proposed two diametrically opposed event flow concepts. The event stream of IE is the event bubbling stream, and the Netscape event stream is the event capture stream.
The event flow of IE is called event bubbling, that is, when the event starts, it is accepted by the most specific element and then propagated up to the less specific node. Look at the following example
Click on the button, then this click event will propagate as follows:
<input>
<div>
<body>
Document
All modern browsers support event bubbling, but there are some differences in implementation. Event bubbling in IE5.5 and earlier versions skips the
Event captureAnother stream of events presented by the Netscape team is called event capture. The idea of event capture is that less specific DOM nodes should receive the event earlier, and the most specific node should receive the event at the end.
For the same example above, click on the button, then the Click event will propagate as follows:
document
<body>
<div>
<input>
Although event capture is the only event flow model supported by Netscape, IE9, Safari, Chrome, opera, and Firefox currently support this event flow model. However, because older browsers do not support it, very few people use event capture.
Dom Event FlowThe event flow defined by the "DOM2 level event" consists of three stages: the event capture phase, the target stage, and the event bubbling phase. The first occurrence of event capture provides an opportunity to intercept the event. Then is the actual target acceptance event. The last stage is the time bubbling phase, in which events can be responded to at this stage. In the previous example, the events are triggered sequentially.
In the DOM event stream, the target of the event is not accepted to the event during the capture phase. This means that during the capture phase, events are stopped from document to Div. The next phase is in the target phase, so the event occurs on input and is considered part of the bubbling phase in event handling. Then, the bubbling phase occurs, and the event is propagated back to document.
Most browsers that support DOM event streams implement a specific behavior, even though the DOM2 level event specification explicitly requires that the capture phase not involve event targets, but IE9, Safari, Chrome, Firefox and Opera9.5 and later will trigger events on event objects during the capture phase. As a result, there are two opportunities to manipulate events on a target object. See the example below.
The result of this demo should be very clear.
Understanding the flow of events in JavaScript
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
