Home > Developer > Web Develop
The event flow describes the order in which events are received from the page. The development team of IE and Netscape put forward the exact opposite concept of event flow. The event stream of IE is the event bubbling stream, and the Netscape event stream is the event capture.
(1) Event bubbling
Events begin to be received by the most specific element (the node with the deepest nesting level in the document) and then propagate up to less specific nodes.
<! DOCTYPE html>
<title>example</title>
<body>
<div id= "mydiv" >click me</div>
</body>
If you click a DIV element in the page, the click event propagates in the following order:
HTML, BODY, DIV---DOCUMENT
Event bubbling is supported by all browsers, but there are some differences in implementation.
(2) Event capture
Idea: A less specific node should receive an event earlier, and the most specific node should receive the event at the end. The intent is to capture the event before it reaches its intended destination. Still, for example,
Click the div element to trigger the Click event Order:
HTML--Body Div, document--
IE9 and browsers support it, although the "DOM2 level Event" specification requires events to start propagating from the Document object, but these browsers capture events from the Window object.
(3) DOM event flow
The event flow defined by the "DOM2 level event" consists of 3 stages: The event capture phase, the target stage, and the event bubbling phase.
Still using the example above, click the div element to trigger the sequence of events:
Capture phase: Document, HTML->body
Target Stage: event occurs on Div
Bubbling stage: event handling, Div->body->html->document
The actual target (DIV) does not receive events during the capture phase. In the target phase, events occur on the div and are considered part of the bubbling phase in event handling. The bubbling phase then occurs, and the event is propagated back to the document.
IE9 and each browser trigger events on the event object during the capture phase. As a result, there are 2 opportunities to manipulate events above the target object.
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
