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>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。