Home > Developer > JavaScript
1. Event Flow
The browser development team has a very interesting question: which part of the page will have a specific event?
For the understanding of this problem you can imagine a set of concentric circles drawn on a piece of paper, if you put your finger on the center of the circle, then your finger is not actually a circle, but all the circles on the paper. Put on the actual page is that you click on a button, but all the circles on the paper.
< chestnuts: sound waves, water waves > in real life
Event Flow: The order in which events are received from the page, popularly said: A series of behavioral interactions in which the user operates the DOM.
2. Event bubbling
Event bubbling: The event flow of IE is called event bubbling, that is, the event begins to be received by the most specific element (the element with the deepest nesting level in the document) and then propagated up to the less specific element (HTML)
Chestnut: Click on the button element in the page, then this event will propagate <chrome browser in the following order >
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Event bubbling Example</title>6 <Scripttype= "Text/javascript">7 window.onload=function(){8 varobtn=document.getElementById ('Button');9 Obtn.onclick= function() {Ten Console.log ('1. You click button'); One }; A Document.body.onclick= function() { - Console.log ('2. You click Body'); - }; the Document.onclick= function() { - Console.log ('3. You click Document'); - }; - Window.onclick= function() { + Console.log ('4. You click Window'); - }; + } A </Script> at </Head> - <Body> - <DivID= "box"> - <inputtype= "button"value= "click Me"ID= "button" /> - </Div> - </Body> in </HTML>View Demo
3. Event Capture
A. Event capture: The event begins to be received by the least-specific element and then propagated down to the most specific target element
To simulate the implementation of event capture get a look at AddEventListener
B.addeventlistener registering event handlers for document nodes, documents, Windows, or XMLHttpRequest
Grammar
Target.addeventlistener (type, listener, usecapture);The code is as follows:
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Event bubbling Example</title>6 <Scripttype= "Text/javascript">7 window.onload=function(){8 varobtn=document.getElementById ('Button');9 Obtn.addeventlistener ('Click', function(){Ten Console.log ('1. You click button'); One },true); A Document.body.addEventListener ('Click', function(){ - Console.log ('1. You click Body'); - },true); the Document.addeventlistener ('Click', function(){ - Console.log ('1. You click Document'); - },true); - Window.addeventlistener ('Click', function(){ + Console.log ('1. You click Window'); - },true); + } A </Script> at </Head> - <Body> - <DivID= "box"> - <inputtype= "button"value= "click Me"ID= "button" /> - </Div> - </Body> in </HTML>View Demo
In summary: Event capture, event target, event bubbling as shown:
Event bubbling and event capture for
Event Flow <javascript Advanced Programming > Learning Notes
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
