JavaScript Event(事件) - 事件監聽(EventListener)

Event Listener(事件監聽)

頁面中的事件都需要一個函數來回應，這類函數通常稱為「事件處理函數，事件處理函式(event handler)」，另一方面，這些函數都在即時監聽著是否有事件發生，所以也稱「事件監聽函數(event listener)。

將事件當成HTML標籤屬性，例如，

<input type="button" value="訊息" onclick="showInfo()" /> 

將事件當成Javascript的屬性，例如，

// 除了要傳遞參數，否則處理函數不用()符號
document.form1.mybutton.onclick = "showInfo"; 

事件是由window或document等上層物件所觸發，只需設定物件的事件屬性，例如，

document.onclick = "showInfo"; 

考慮結構與行為分離，例如，匿名函數，

// 在視窗完成載入後，
window.onload=function(){
  // 取得元素id屬性為myP元素的控制權
  var getP=document.getElementById("myP");
  // 設定myP元素的onclick事件
  getP.onclick=function(){
    alert("click");
  }
} 

IE事件監聽

在IE中，每個元素都有兩個方法來處理事件的監聽，例如，

// 新增監聽函數
[Object].attachEvent("event handler",fnHandler);
// 刪除監聽函數
[Object].detachEvent("event handler",fnHandler);

event handler為事件的名稱，如onclick，onload…；fnHandler為監聽函數名稱，這個函數不需加上括弧的執行結果。例如，

getP.attachEvent("onclick",fnClick1);
getP.attachEvent("onclick",fnClick2);

在IE7/8中，兩個函數的呼叫順序是fnClick2 → fnClick1，但兩者都會被執行。例如，我們在fnClick2最後加上detachEvent來解除fnClick1，但fnClick1還是會被執行；但如果Click第二次，因為fnClick1已經被detachEvent解除，所以只會執行fnClick2。

IE不會執行標準DOM的addEventListener/removeEventListener方法

標準DOM事件監聽

每個元素都有兩個方法來處理事件的監聽，建議使用標準DOM方法來撰寫監聽事件，例如，

// 新增監聽函數
[Object].addEventListener("event name",fnHandler, bCapture);
// 刪除監聽函數
[Object].removeEventListener("event name",fnHandler, bCapture); 

event name是click、mousemove…沒有on(注意，和IE不一樣)，bCapture：false為冒泡。例如，

getP.addEventListener("click",fnClick1,false);
getP.addEventListener("click",fnClick2,false); 

DOM的執行順序為fnClick1 → fnClick2，而且是fnClick1執行完成後才會從行fnClick2。所以如果我們在fnClick1中最後加上removeEventListener來解除fnClick2，那fnClick2就不會執行。