網頁

JavaScript Event(事件) - 事件屬性和方法

事件屬性和方法

主要注意在IE與DOM名稱的差異上。


JavaScript 事件屬性和方法
IE名稱DOM名稱類型讀/寫說明
altKeyaltKeyBooleanR/W按下Alt鍵則為true
butoonbutoonIntegerR/W滑鼠事件,值對應按下的滑鼠鍵(對照下一張表格)
cancelBubblecancelBubbleBooleanIE:R/W、DOM:RIE設置為true可取消氣泡事件
N/AstopPropagation()FunctionN/ADOM使用此方法來取消氣泡事件
clientXclientXIntegerIE:R/W、DOM:R滑鼠指標在「用戶端區域」的X座標
clientYclientYIntegerIE:R/W、DOM:R滑鼠指標在「用戶端區域」的Y座標
ctrlKeyctrlKeyBooleanIE:R/W、DOM:R按下Ctrl鍵則為true
fromElementrelatedTargetElementIE:R/W、DOM:R滑鼠指標所離開的元素
toElementcurrentTargetElementIE:R/W、DOM:R滑鼠指標正在進入的元素
N/AcharCodeIntegerR按下按鍵的Unicode值
keyCodekeyCodeIntegerR/WIE中keypress事件按下按鍵的Unicode值,keydown/keyup事件為按鍵的數位代號。DOM中keypress時為0,其餘為按下按鍵的數位代號。
N/AdetailIntegerR滑鼠按鍵被按一下的次數
returnValueN/ABooleanR/W設置為false時可取消IE事件的預設行為
N/ApreventDefault()FunctionN/ADOM使用該方法來阻止事件的預設行為
screenXscreenXIntegerIE:R/W、DOM:R滑鼠指標相對於「整個電腦螢幕」的X座標值
screenYscreenYIntegerIE:R/W、DOM:R滑鼠指標相對於「整個電腦螢幕」的Y座標值
shiftKeyshiftKeyBooleanIE:R/W、DOM:R按下Shift鍵則為true
srcElementtargetElementIE:R/W、DOM:R引起事件的元素/物件
typetypeStringIE:R/W、DOM:R事件的名稱

我最常看到也最麻煩是程式碼中只寫 returnValue,也就是說單單只針對IE進行處理,只要使用其他Browser即可閃過些段程式碼。正規有進行相容性處理是returnValue與preventDefault都要進行處理。

範例:使用同一個函數處理多個事件

window.onload=function(){
  var objImg = document.getElementByTagName("img")[0];
  objImg=handle;
}

funcion handle(evt){
  // 相容性處理
  if (window.event) evt = window.event; 
  // 透過type屬性判斷事件名稱,這裡沒有on字首
  if (evt.type == "click")
    ......
  else if (evt.type == "mouseover")
    ......
}	

範例:找出觸發事件的物件

function handle(evt){
  // 相容性處理
  if(window.event) evt = window.event;		
  var getTarget;
  if(evt.srcElement)  // 處理相容性,獲取IE事件目標	
    getTarget = evt.srcElement;
  else
    getTarget = evt.target; // 獲取DOM事件目標
  ......
}	

button的值


button 數值表
數值IEDOM
0未按下按鍵左鍵
1左鍵中鍵(滑輪)
2右鍵右鍵
3同時按下左右鍵不支援,undefined
4中鍵(滑輪)不支援,undefined
5同時按下左中鍵不支援,undefined
6同時按下右中鍵不支援,undefined
7同時按下左中右鍵不支援,undefined

鍵盤事件

鍵盤事件重要的是「使用者按了什麼鍵?」IE沒有charCode屬性,而keyCode只有在keydown與keyup事件觸發時才會與標準DOM的keyCode相同,在keypress事件中等於charCode。

if (window.event) {
  evt = window.event;
  evt.charCode=(evt.type == "keypress") ? evt.keyCode : 0;
  ...
}	

通常不採用keyCode是因為它表示鍵盤按鍵,而不是輸出字元,例如輸出"a"和"A"時,keyCode的值是相等的,charCode則以字元為區分,另外,在keypress事件中,DOM的keyCode值始終為0。

沒有留言:

張貼留言

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