1.事件流 瀏覽器開發團隊遇到一個很有意思問題：頁面的那一部分會擁有特定的事件？ 對於理解這個問題您可以想象畫在一張紙上的一組同心圓，如果你把手指放在圓心上，那麼你的手指指向的其實不是一個圓，而是紙上所有的圓。放到實際頁面中就是，你點擊一個按鈕，而是紙上所有的圓。 <慄子：現實生活中的聲波、水波> ...
1.事件流
瀏覽器開發團隊遇到一個很有意思問題：頁面的那一部分會擁有特定的事件？
對於理解這個問題您可以想象畫在一張紙上的一組同心圓，如果你把手指放在圓心上，那麼你的手指指向的其實不是一個圓，而是紙上所有的圓。放到實際頁面中就是，你點擊一個按鈕，而是紙上所有的圓。
<慄子：現實生活中的聲波、水波>
事件流：從頁面中接收事件的順序，通俗說：用戶操作DOM的一系列行為交互.
2.事件冒泡
事件冒泡：IE的事件流叫事件冒泡，即事件開始由最具體的元素（文檔中嵌套層次最深的那個元素）接收，然後逐級向上傳播到較為不具體的元素（html）
慄子：點擊頁面中的button元素，那麼這個事件會按照如下順序傳播<Chrome瀏覽器>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Event Bubbling Example</title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var oBtn=document.getElementById('button'); 9 oBtn.onclick = function() { 10 console.log('1. You click button'); 11 }; 12 document.body.onclick = function() { 13 console.log('2. You click body'); 14 }; 15 document.onclick = function() { 16 console.log('3. You click document'); 17 }; 18 window.onclick = function() { 19 console.log('4. You click window'); 20 }; 21 } 22 </script> 23 </head> 24 <body> 25 <div id="box"> 26 <input type="button" value="Click Me" id="button" /> 27 </div> 28 </body> 29 </html>View Demo
3.事件捕獲
a.事件捕獲：即事件開始由最不具體的元素接收，然後逐級向下傳播到為最具體的目標元素
為了模擬實現事件捕獲得瞭解一下addEventListener
b.addEventListener 為文檔節點、document、window 或 XMLHttpRequest 註冊事件處理程式
語法
target.addEventListener(type, listener, useCapture);- target 文檔節點、document、window 或 XMLHttpRequest。
- type 字元串，事件名稱，不含“on”，比如“click”、“mouseover”、“keydown”等。
- listener 實現了 EventListener 介面或者是 JavaScript 中的函數。
- useCapture 是否使用捕捉，看了後面的事件流一節後就明白了，一般用 false事件冒泡、true事件捕獲
代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Event Bubbling Example</title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var oBtn=document.getElementById('button'); 9 oBtn.addEventListener('click', function(){ 10 console.log('1. You click button'); 11 },true); 12 document.body.addEventListener('click', function(){ 13 console.log('1. You click body'); 14 },true); 15 document.addEventListener('click', function(){ 16 console.log('1. You click document'); 17 },true); 18 window.addEventListener('click', function(){ 19 console.log('1. You click window'); 20 },true); 21 } 22 </script> 23 </head> 24 <body> 25 <div id="box"> 26 <input type="button" value="Click Me" id="button" /> 27 </div> 28 </body> 29 </html>View Demo
綜上所述：事件捕獲、事件目標、事件冒泡如下圖所示：
