javascript开发：javascript机制

JavaScript 的事件是以一种流的形式存在的，一个事件会有多个元素同时响应。具体分为：捕获型事件 （非IE）（经@hentailing 同学提醒，IE已支持）、冒泡型事件（所有浏览器都支持）。
捕获型事件是自上而下的，而冒泡型事件是自下而上的。下面这张图说的很明了：

1.捕获型事件：

[html]  view plain  copy

1. <html>  
2. <body>  
3.     <div id="div1" style="width:300px;height:300px;background-color:red;">  
4.         #div1  
5.         <div id="div2" style="width:200px;height:200px;background-color:yellow;margin-top:30px;">  
6.             #div2  
7.         </div>  
8.     </div>  
9. </body>  
10. <script>  
11.     var a = document.getElementById('div1');  
12.     var b = document.getElementById('div2');  
13.     a.addEventListener('click', alertID, true);  
14.     b.addEventListener('click', alertID, true);  
15.   
16.     function alertID() {  
17.         alert(this.id);  
18.     }  
19. </script>  
20. </html>  

下图中id为div1和div2的两个元素都被绑定了捕捉阶段的事件处理函数：
当点击#div1（红色区域）时，应该会alert出”div1″当点击#div2（黄色区域）时，应该会先alert出”div1″，再alert出”div2″，因为在事件捕捉阶段，事件是从根元素向下传播的，#div1是#div2的父元素，自然绑定在#div1上的click事件也会先于#div2上的click事件被执行。

2.冒泡型事件：
一个典型的例子：

[html]  view plain  copy

1. <html>  
2. <head>  
3. <script type="text/javascript">  
4.     var i = 1;  
5.     function Add(sText,objText)  
6.     {  
7.         document.getElementById("Console").innerHTML +=sText + "执行顺序：" + i + "<br />" + "<hr />";  
8.         i = i + 1;  
9.         //window.event.cancelBubble = true;   
10.     }  
11. </script>  
12. </head>  
13.   
14.   
15. <body onclick="Add('body事件触发<br />','body')">  
16. <div onclick="Add('div事件触发<br />','div')">  
17.     <p onclick="Add('p事件触发<br />','p')" style="background:#c00;">点击</p>  
18. </div>  
19. <div id="Console" style="border:solid 1px #ee0; background:#ffc;"></div>  
20.   
21.   
22. </body>  
23. </html>  

结果：

参考：http://www.nowamagic.net/javascript/js_EventAnalysis.php