JavaScript示例六（事件冒泡与捕获）

来源：互联网发布：淘宝助理类目空白编辑：程序博客网时间：2024/06/07 03:03

<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>

0 0