網頁

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就不會執行。

2 則留言:

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。