Home > Developer > JavaScript
The event flow describes the order in which events are received from the page. The event churn event of IE bubbled up, while the Netspace event churn event was captured.
The event flow of IE is called event bubbling, that is, when the event starts, it is received by the concrete element (the node with the deepest nesting level in the document) and then propagates up to the non-specific node.
1 <HTMLonclick= "Console.log (' html ')">2 <Head>3 <MetaCharSet= "UTF-8">4 <title></title>5 </Head>6 <Bodyonclick= "Console.log (' body ')">7 <DivID= "AA"onclick= "Console.log (' div ');"style= "width:100px;">2222</Div>8 </Body>9 </HTML>
In the above code, if you click the Div, the event is executed in the order of Div, body, and HTML. This means that the event first takes place on the Div, and the div is the element we clicked on. The event then propagates up the DOM until it propagates to the document object. Event bubbling is supported by all browsers.
1 function Stopbubble (e) {2 if (e&&e. stoppropagation) {3 e.stoppropagation (); 4 }5 else{6 window.event.cancelbubble=true; 7 }8 }The stopbubble function above can prevent the bubbling of events. The above wording is compatible with IE and non-ie browsers.
The idea of event capture is that less specific nodes receive the event first, and the most specific node receives the event at the end. Event capture is intended to be captured before the event reaches the final node. In the previous example, the event occurs in the order of document, HTML, body, and Div.
The event flow consists of three phases: the event capture phase, the target stage, and the event bubbling phase. The first occurrence is event capture, which provides an opportunity for the interception of events. Then the actual target receives the event. The last one is the event bubbling phase, in which events can be responded to at this stage.
In the DOM event stream, the specific element div does not get the event in the capture phase, which means that the event is stopped from document to HTML, to body. The next phase is in the target phase, so the event occurs on top of the div and is considered part of the event bubbling phase in event handling. The last event bubbles up and uploads the event back to document. DOM event streams are not supported by IE8 and earlier browsers.
A brief talk on JavaScript events (event flow)
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
