JavaScript示例六(事件冒泡与捕获)
2014-11-27 09:57
363 查看
<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>
相关文章推荐
- JavaScript示例六(事件冒泡与捕获)
- JavaScript事件捕获与事件冒泡原理
- JavaScript 事件顺序:冒泡和捕获
- javascript事件冒泡详解和捕获、阻止方法
- JavaScript阻止事件冒泡示例分享
- Javascript的事件冒泡和事件捕获,阻止事件冒泡,事件源target
- Javascript事件模型:事件捕获和事件冒泡
- javascript 事件的捕获和冒泡
- javascript事件捕获和冒泡
- JavaScript阻止事件冒泡示例分享
- JavaScript事件捕获与事件冒泡原理 IE和DOM之间存在哪些主要差别
- javascript事件处理方式之捕获冒泡
- javascript事件冒泡与事件捕获
- JavaScript中事件捕获(Event capturing)-------------->由外向内,事件冒泡(Event bubblin)---------->由内向外
- javascript dom 事件冒泡与捕获
- javascript事件冒泡和捕获
- 【转】JavaScript 事件顺序:冒泡和捕获
- Javascript事件模型系列(二)事件的捕获-冒泡机制及事件委托机制
- JavaScript事件冒泡、事件捕获和阻止默认事件
- javascript的事件捕获和事件冒泡