JavaScript事件處理：深入理解this關鍵字及事件處理機制

高效的客戶端Web應用離不開JavaScript事件處理機制。事件允許JavaScript偵測用戶行為，例如鼠標懸停、點擊鏈接、頁面滾動、窗口大小調整、拖拽對像等等。 你的JavaScript代碼可以註冊一個事件處理函數，在特定事件發生時觸發。大多數瀏覽器會向該函數傳遞一個包含事件信息的單一對象，例如按鍵信息、鼠標光標位置等。然後，你可以執行某些操作，例如動畫元素、發起Ajax請求或阻止瀏覽器的默認行為。此外，this關鍵字也可能被設置。通常情況下，this指向觸發事件的元素，但並非總是如此。

避免使用內聯事件處理程序

內聯事件處理程序（例如click me）雖然簡單，但存在諸多缺點：它們限制性強，笨拙且會使HTML代碼膨脹。由於事件調用和處理程序定義在不同位置，因此維護起來很複雜。最後，由於頁面加載時可能調用事件，因此腳本標籤必須放置在HTML頂部，而不是底部。

傳統DOM0事件

傳統事件處理方法（例如link.onclick = EventHandler;）雖然簡單直接，但每個事件類型只能分配一個處理程序。 注意：不要使用link.onclick = EventHandler();，這會立即執行EventHandler函數，並將返回值（undefined）賦值給#link節點的onclick屬性。這不會報錯，但你的處理程序在點擊事件發生時將永遠不會被調用。

現代DOM2事件

現代事件處理允許為同一事件指定多個處理程序。然而，由於微軟和W3C在實現上存在一些分歧，只有IE9及以上版本支持addEventListener()。我們可以使用對象檢測創建一個跨瀏覽器事件附加函數：

AttachEvent(link, "click", EventHandler);

function AttachEvent(element, type, handler) {
  if (element.addEventListener) element.addEventListener(type, handler, false);
  else element.attachEvent("on"   type, handler);
}

與DOM0事件類似，所有瀏覽器都將this設置為觸發事件的元素……除了IE8及以下版本。在IE8及以下版本中，this始終是全局window對象。幸運的是，我們可以從事件對像中確定目標元素：

function EventHandler(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;
  console.log(target);
}

JavaScript事件處理程序中this關鍵字的意義

this關鍵字指的是函數被調用的上下文。在事件處理程序中，this通常指向附加事件處理程序的HTML元素。這允許你直接訪問和操作元素。

如何在事件處理程序中使用this

使用this很簡單，就像使用其他變量一樣。記住，this指向附加事件處理程序的HTML元素。

JavaScript中的不同事件類型

JavaScript支持多種事件，例如click、mouseover、mouseout、keydown、keyup、load和unload。

如何將事件處理程序附加到元素

可以使用addEventListener方法將事件處理程序附加到元素。該方法接受兩個參數：要監聽的事件名稱和事件發生時要運行的函數。

JavaScript中的Event對象

Event對像是在事件發生時創建的特殊對象。該對象包含有關事件的信息，例如事件類型、目標元素、事件發生時間等。你可以在事件處理程序函數中訪問Event對象。