JavaScript樣本六（事件冒泡與捕獲），javascript樣本
<html><head><title>事件冒泡與事件捕獲樣本</title><style type="text/css">div{color:red;}</style></head><body><div id="myDiv" class="main" onclick="alert('click div');"><p>div接受點擊事件</p><form method="post"><input type="text" name="username" value="zhang"><input type="button" id="mybtn" value="click me"></form></div><ol id="dropdown"><li><a href="#">List item 1</a><ol><li><a href="#">List item 1.1</a></li><li id="myli"><a href="#">List item 1.2</a></li><li><a href="#">List item 1.3</a></li></ol></li></ol><script type="text/javascript">var btn=document.getElementById("mybtn");var myol=document.getElementById("dropdown");var myli=document.getElementById("myli");var handler=function(event){switch (event.type){case "click":alert("click button");break;/*case "mouseover":event.target.style.backgroundColor="green";alert(event.screenX+","+event.screenY);break;case "mouseout":event.target.style.backgroundColor="";break;*/}}var handler2=function(){alert("click ol");}var handler3=function(){alert("click li");}//冒泡階段處理事件，自下而上執行btn.addEventListener("click",handler,false);btn.addEventListener("mouseover",handler,false);btn.addEventListener("mouseout",handler,false);//捕獲階段處理事件，自上而下執行myol.addEventListener("focus",handler2,true);myli.addEventListener("focus",handler3,true);</script></body></html>
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
