Home > Developer > JavaScript
(i) Event-handling model---event bubbling, capturing
(1) Event bubbling
-<body> -<div class= "Warpper" > -<div class= "Content" > -<div class= "box" > - in</div> -</div> to</div> +<script type= "Text/javascript" > - varWarpper = Document.getelementsbyclassname (' warpper ') [0]; the varContent = document.getelementsbyclassname (' content ') [0]; * varbox = document.getelementsbyclassname (' box ') [0]; $ Panax NotoginsengWarpper.addeventlistener (' click ',function(){ -Console.log ("warpper-red"); the},false) +Content.addeventlistener (' click ',function(){ AConsole.log (' Content-yellow '); the},false) +Box.addeventlistener (' click ',function(){ -Console.log (' Box-bule '); $},false) $ -</script> - the</body>
As follows: Click on the Blue area, three div will be corresponding Click event
(2) Event capture
1Warpper.addeventlistener (' click ',function(){2Console.log ("warpper-red");3},true)4Content.addeventlistener (' click ',function(){5Console.log (' Content-yellow ');6},true)7Box.addeventlistener (' click ',function(){8Console.log (' Box-bule ');9},true)
Click on the blue area, will be captured by the father level elements, and then in the child elements;
(3) Trigger sequence: First capture and then bubble
1Warpper.addeventlistener (' click ',function(){2Console.log ("Warpper-red,bubble");3},false)4Content.addeventlistener (' click ',function(){5Console.log (' content-yellow,bubble ');6},false)7Box.addeventlistener (' click ',function(){8Console.log (' box-bule,bubble ');9},false)Ten OneWarpper.addeventlistener (' click ',function(){ AConsole.log ("warpper-red"); -},true) -Content.addeventlistener (' click ',function(){ theConsole.log (' Content-yellow '); -},true) -Box.addeventlistener (' click ',function(){ -Console.log (' Box-bule '); +},true)
JavaScript events: Event processing model (bubbling, capturing)
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
