javascript的事件監聽與捕獲和冒泡

在前端開發中，咱們常常須要對某些事件進行監聽。這樣只要在指定的元素上觸發了該事件，就會執行一個回調來進行相關的操做。

而js中事件監聽方法總共有三種，分別以下所示：

• element.addEventListener(type, listener[, useCapture]); // IE6~8不支持
• element.attachEvent(’on’ + type, listener); // IE6~10，IE11不支持
• element[’on’ + type] = function(){} // 全部瀏覽器

demo:

function cb() { console.log(1); }
element.addEventListener('click', cb, false);
element.attachEvent('onclick', cb);
element.onclick = cb;

參數含義：

1.  type ：事件類型
2.  listener ：事件觸發後的回調函數
3.  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。這個階段被稱之爲冒泡階段。在此階段註冊的事件監聽器會對相應的冒泡事件進行處理。

在一個事件完成了全部階段的傳播路徑後，它的 Event.currentTarget 會被設置爲 null 而且 Event.eventPhase 會被設爲0。 Event 的全部其餘屬性都不會改變（包括指向事件目標的 Event.target 屬性）。