Home > Developer > Web Develop
Problem:
<div class= ' item ' id= ' outer ' onclick= ' Alert (' outer ') ' > <div class= ' item ' id= ' inner ' onclick= ' alert (' Inner '); " > <div class= ' item ' id= ' core ' onclick= ' alert (' core ') > CORE!!!!! </div> </div> </div>1. In the above Div, if you click Core, how many alert will be executed? The order of precedence is above?
Bubbling is a way of handling the process of binding events to each node in the DOM node tree;
Because of the differences between browser software and related organizations, there are three event streams: event bubbling , event capture ,DOM event flow, where DOM event flow has been implemented by all major browsers;
The 2.chorme uses the bubbling event flow mode, which explains the sequence of event execution of the bubbling event stream;
3. Stoppropagation () is the stop bubbling event stream. If you add this method to Node A, the bubble is broken at Node A, and all subsequent node binding events are not executed;
3. AddEventListener is used at the same time to add events to a node;
4. Below is the code, save the HTML file to see the effect;
<HTML><Head> <styletype= "Text/css">. Item{Display:Table;margin:100px; }#outer{width:400px;Height:400px;Background-color:Blue; }#inner{vertical-align:Middle;width:200px;Height:200px;Background-color: White; }#core{width:80px;Height:80px;Background-color:Red;text-indent:10px;Line-height:50px; } </style> </Head><Body> <Divclass= ' Item 'ID= ' outer 'onclick= "alert (' outer ')"> <Divclass= ' Item 'ID= ' inner 'onclick= "alert (' inner '); stopbubble (Arguments[0])"> <Divclass= ' Item 'ID= ' core 'onclick= "alert (' core ')">CORE!!!!! </Div> </Div> </Div></Body><!--You must write <script> under <body> -<Scripttype= ' Text/javascript '> varCore=document.getElementById ('Core'); Core.addeventlistener ("Click",function() {alert ('dddddd')},false); //addeventlistener:can Add one more event to node "core" functionstopbubble (e) {e.stoppropagation ();//Stop Bubble Event on this node }</Script></HTML>
Front End effect:
Click core!!! After:
1. Alert core is bound to dddd and then alert dddd;
2. After bubbling to the inner node, alert inner, but simultaneously executes stopbubble (Arguments[0]) to stop bubbling;
3. Stop bubbling, the node subsequent nodes will not be executed, so will not alert outer;
JS event bubbling, stop bubbling, addeventlistener--instance Demo
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
