Home > Developer > Web Develop
Directly on the code, copy and paste it into your HTML page click to see immediately understand, do not have a bunch of words to explain
<!DOCTYPE HTML><HTML> <Head> <title>Bootstrap Test</title> <MetaCharSet= "UTF-8" /> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <!--<link href= "css/bootstrap.min.css" rel= "stylesheet" > - <!--[If Lt IE 9]> <script src= "js/html5shiv.js" ></script> <script src= "Js/respond.min.js "></script> <! [EndIf] - <!--<script src= "Js/jquery-1.12.4.min.js" ></script> - <!--<script src= "Js/bootstrap.min.js" ></script> - <styletype= "Text/css"> /*a {background: #cccccc; Color:white; @link-color}*/. Box{width:300px;Height:200px;Border:1px solid Red; }. Content{width:200px;Height:180px;Border:1px yellowgreen Solid; }. H11{width:150px;Border:1px Blue Solid; } /*@media screen and (max-width:960px) {body {background:black} }*/ </style> </Head> <Body> <H1>Hello, world!.</H1> <Divclass= "Container">Test</Div> <Divclass= "box"> <Divclass= "Content"> <H1class= "H11">WoshiH1</H1> </Div> </Div> </Body> <Script>//window.onresize = function () {//Console.log (document.body.clientWidth);// } functionReturntar () {vare=e||window.event; varTarget=E.target||e.srcelement; returntarget.className.toLowerCase (); } varhh=Document.getelementsbyclassname ('H11')[0]; varBox=Document.getelementsbyclassname ('Box')[0]; varcontent=Document.getelementsbyclassname ('content')[0]; Hh.addeventlistener ('Click', function() {Console.log ("Small bubble target:" +Returntar ()); }, false); Hh.addeventlistener ('Click', function() {Console.log ("Small capture target:" +Returntar ()); }, true); Content.addeventlistener ('Click', function() {Console.log ("Medium bubble target:" +Returntar ()); }, false); Content.addeventlistener ('Click', function() {Console.log ("capture target in:" +Returntar ()); }, true); Box.addeventlistener ('Click', function() {Console.log ("Big bubble target:" +Returntar ()); }, false); Box.addeventlistener ('Click', function() {Console.log ("Large capture target:" +Returntar ()); }, true); </Script></HTML>
JS about bubbling events and capturing events
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
