淺談JavaScript事件

淺談JavaScript事件

事件流

JavaScript的事件流有：Netscape提出的捕獲流、IE的冒泡流以及DOM2級事件流。這裏只討論DOM2級事件流。

DOM2級事件流有三個階段：捕獲階段——>處於目標階段——>冒泡階段。如圖所示：

其實這些階段都是相對的。真實的過程取決於事件的目標元素以及各目標元素的祖先元素是否有事件處理函數。

添加事件處理程序

三種方法：

• 在html標籤中直接指定，如<div onclick="alert(event.type)"></div>;
• DOM0級方法，如element.onclick = function(e) { alert(e.type); };
• DOM2級方法，如element.addEventListener('click', fn, false);

三種方法各有什麼優缺點呢？

• html方法，用戶可能在元素剛一出現就觸發了事件，但此時js代碼可能還未加載。其次，HTML代碼和JavaScript代碼緊密耦合，不利於開發和維護，因此不推薦使用這種方法。
• DOM0級方法，簡單且兼容性好，可是在須要對一個元素設置多個事件處理程序時便顯得孱弱。
• DOM2級方法，能夠輕易的設置多個事件處理程序，可是在刪除事件處理程序時，傳給removeEventListener()的參數必須與以前一致，且IE9如下不支持。

事件處理函數須要注意的：

• this指的是target或currentTarget(後面討論)。
• 兩種DOM方法都會給事件處理函數傳一個事件對象做爲參數。html方法直接引用event

事件對象

上面有提到事件對象event，event對象有不少屬性和方法，這裏不一一列出只討論其中經常使用的幾個：

• target: event真正的目標元素;
• currentTarget: 設置了事件處理函數的元素;
• stopPropagation(): 阻止event繼續冒泡;
• preventDefault(): 阻止事件的默認行爲。

事件類型

太多，沒法一一列舉，提幾個本身容易忽略的點。

• blur、focus是不會冒泡的
• 鍵盤事件keydown觸發條件是按任意鍵，keypress是按字符鍵，這二者按住不放都會持續觸發，是在文本框變化以前就觸發了的。keyup即鬆開按鍵觸發