一 介绍
1、当浏览者在页面上执行了某个动作,页面上实际上有多个元素可以响应该事件,假如单机页面的某个按钮,该按钮又处于<div>元素之内,则实际上用户既单机了该按钮,也单击了<div>元素。
2、IE中的事件传递方向是从事件发生的对象开始,然后依次向该对象所在的父节点传递。这种传递方式是从下向上传递的,因此这种事件的传递机制又称为冒泡。
3、下面应用说明了这种机制的用法
二 冒泡机制代码
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> Internet Explorer事件冒泡机制 </title> </head> <body οnclick="gotClick('body元素');"> <table οnclick="gotClick('table元素');"> <tr οnclick="gotClick('tr元素');"> <td οnclick="gotClick('td元素');"> <p οnclick="gotClick('p元素');"> <input type="button" value="单击我" οnclick="gotClick('按钮');" /> </p> </td> </tr> </table> <hr/> <div id="results"></div> <script type="text/javascript"> var gotClick = function(who) { document.getElementById("results").innerHTML += who + " 被单击了 <br />"; } </script> </body> </html>
三 冒泡机制代码运行结果
四 阻止冒泡机制代码
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> Internet Explorer事件冒泡机制 </title> </head> <body οnclick="gotClick('body元素');"> <table οnclick="gotClick('table元素');"> <tr οnclick="gotClick('tr元素');"> <td οnclick="gotClick('td元素');"> <p οnclick="gotClick('p元素');"> <input type="button" value="单击我" οnclick="gotClick('按钮'); event.cancelBubble=true;" /> </p> </td> </tr> </table> <hr/> <div id="results"></div> <script type="text/javascript"> var gotClick = function(who) { document.getElementById("results").innerHTML += who + " 被单击了 <br />"; } </script> </body> </html>
五 阻止冒泡机制代码运行结果