JavaScript的事件監聽與捕獲和冒泡
在前端開發中，我們經常需要對某些事件進行監聽。這樣只要在指定的元素上觸發了該事件，就會執行一個回調來進行相關的操作。
而js中事件監聽方法總共有三種，分別如下所示：
- element.addEventListener(type, listener[, useCapture]); // IE6~8不支持
- element.attachEvent(’on’ + type, listener); // IE6~10，IE11不支持
- element[’on’ + type] = function(){} // 所有瀏覽器 </ul>
demo:
function cb() { console.log(1); }
element.addEventListener('click', cb, false);
element.attachEvent('onclick', cb);
element.onclick = cb; 參數含義：
type：事件類型
listener：事件觸發后的回調函數
useCapture：是否使用捕獲，如果值為true， useCapture 表示用戶希望發起捕獲。 在發起捕獲之后， 只要Dom子樹下發生了該事件類型，都會先被該事件監聽器捕獲，然后再被派發到Dom子樹中的事件監聽器中。并且向上冒泡的事件不會觸發那些發起捕獲的事 件監聽器。進一步的解釋可以查看 DOM Level 3 Events 文檔。 useCapture 默認值為false 。
addEventListener是W3C工作組在DOM Level 2開始引入的一個注冊事件監聽器的方法；而在此之前，傳統的事件監聽方法是通過element[’on’ + type]的方式來注冊的。它們兩之間的主要區別是，element[’on’ + type]的方式無法使用事件捕獲，并且element[’on’ + type]不支持對同一個元素的同一個事件注冊多個事件監聽器。如下面的例子所示，元素被點擊后只會輸出1，而不會輸出0和1.
element.onclick = function(){ console.log(0); }
element.onclick = function(){ console.log(1); } 然而addEventListener方法在IE6~8的瀏覽器中不被支持。那么在低版本的IE中怎么來為同一個事件注冊多個事件監聽器呢？原來IE從IE5.0系列開始就引入了attachEvent()方法來支持這一特性。但遺憾的是該方法也不支持事件捕獲。并且從IE 11開始，這個方法已經被棄用。
談談事件的捕獲和冒泡
W3C規范中定義了3個事件階段，依次是捕獲階段、目標階段、冒泡階段。事件對象按照上圖的傳播路徑依次完成這些階段。如果某個階段不支持或事件對象的傳播被終止，那么該階段就會被跳過。舉個例子，如果Event.bubbles屬性被設置為false，那么冒泡階段就會被跳過。如果Event.stopPropagation()在事件派發前被調用，那么所有的階段都會被跳過。
- 捕獲 階段：在事件對象到達事件目標之前，事件對象必須從window經過目標的祖先節點傳播到事件目標。 這個階段被我們稱之為捕獲階段。在這個階段注冊的事件監聽器在事件到達其目標前必須先處理事件。
- 目標 階段：事件對象到達其事件目標。 這個階段被我們稱為目標階段。一旦事件對象到達事件目標，該階段的事件監聽器就要對它進行處理。如果一個事件對象類型被標志為不能冒泡。那么對應的事件對象在到達此階段時就會終止傳播。
- 冒泡 階段： 事件對象以一個與捕獲階段相反的方向從事件目標傳播經過其祖先節點傳播到window。這個階段被稱之為冒泡階段。在此階段注冊的事件監聽器會對相應的冒泡事件進行處理。 </ul>
在一個事件完成了所有階段的傳播路徑后，它的Event.currentTarget會被設置為null并且Event.eventPhase會被設為0。Event的所有其他屬性都不會改變（包括指向事件目標的Event.target屬性）
<script src="http://htmljs.b0.upaiyun.com//js/tuiku.js"></script>來源：html-js