Javascript事件處理機制

Javascript中事件處理

事件處理分為三個階段：捕獲 - 處理 - 起泡。

以點擊按鈕為例：

捕獲階段：由外層到內層，首先調用給Window註冊的click捕獲階段監聽方法，然後document、body、一層層的父節點，一直到按鈕本身。

處理階段：調用按鈕本身的click監聽方法。

起泡階段：從按鈕開始，從內層到外層，依次調用各級父節點的起泡階段監聽方法，直到Window。

但是，對於IE8及更低版本IE，不支援捕獲階段，因此捕獲階段的事件監聽目前尚不通用。

通常的事件處理方法形式為：

function eventHandler(e) {e = e || window.event;var target = e.target || e.srcElement;... ...}

e為事件對象，當事件觸發時，作為參數傳進來，但對於IE8及更低版本IE不適用，只能通過全域的event變數訪問，好在不會出現同時處理兩個事件的情況。

如何註冊事件監聽方法？

（1）直接寫在HTML裡，DOM元素的屬性裡。

<button id="btn" onclick="alert(123)">CLICK</button><button id="btn2" onclick="eventHandler()">CLICK2</button>

（2）在Javascript中，賦值給相應的DOM元素。

document.getElementById('btn2').onclick = eventHandler;

（3）addEventListener

document.getElementById('btn2').addEventListener('click', eventHandler, false);

這裡第三個參數是標識何時觸發eventHandler，false表示在事件起泡階段觸發，true表示在事件捕獲階段觸發。因為在IE8即更低版本不支援事件捕獲，因此不經常使用true。

可以給同一個控制項調用多次此註冊方法，註冊多個handler。

removeEventListener與之對應。

在IE8及更低版本IE中，使用attachMent代替。

document.getElementById('btn2').attachEvent('onclick', eventHandler);

此時，瀏覽器僅支援事件起泡，不支援事件捕獲，因此無第三個參數。

detachEvent與之對應。

阻止瀏覽器預設操作

對於通過第一種、第二種方法註冊的監聽方法，傳回值如果為false，就阻止進一步的瀏覽器預設操作。以超連結為例：

<a href="http://www.baidu.com" onclick="alert(1);return false">LINK</a>

點擊了這個LINK後，因為傳回值為false，因此不會跳轉到百度首頁（預設操作）。

對於通過第三種方法註冊的監聽方法，傳回值無效，可以通過event.preventDefault()來阻止瀏覽器的預設操作。對於IE8即更低版本IE，不支援preventDefault方法，只能通過event.returnValue=false來實現。因此，阻止瀏覽器預設操作的通用寫法為：

if(e.preventDefault) {e.preventDefault();} else {e.returnValue = false; // IE8-}

阻止事件起泡

if(e.stopPropagation) {e.stopPropagation();} else {e.cancelBubble = true;}