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

事件屬性和方法

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

JavaScript 事件屬性和方法

IE名稱	DOM名稱	類型	讀/寫	說明
altKey	altKey	Boolean	R/W	按下Alt鍵則為true
butoon	butoon	Integer	R/W	滑鼠事件，值對應按下的滑鼠鍵(對照下一張表格)
cancelBubble	cancelBubble	Boolean	IE：R/W、DOM：R	IE設置為true可取消氣泡事件
N/A	stopPropagation()	Function	N/A	DOM使用此方法來取消氣泡事件
clientX	clientX	Integer	IE：R/W、DOM：R	滑鼠指標在「用戶端區域」的X座標
clientY	clientY	Integer	IE：R/W、DOM：R	滑鼠指標在「用戶端區域」的Y座標
ctrlKey	ctrlKey	Boolean	IE：R/W、DOM：R	按下Ctrl鍵則為true
fromElement	relatedTarget	Element	IE：R/W、DOM：R	滑鼠指標所離開的元素
toElement	currentTarget	Element	IE：R/W、DOM：R	滑鼠指標正在進入的元素
N/A	charCode	Integer	R	按下按鍵的Unicode值
keyCode	keyCode	Integer	R/W	IE中keypress事件按下按鍵的Unicode值，keydown/keyup事件為按鍵的數位代號。DOM中keypress時為0，其餘為按下按鍵的數位代號。
N/A	detail	Integer	R	滑鼠按鍵被按一下的次數
returnValue	N/A	Boolean	R/W	設置為false時可取消IE事件的預設行為
N/A	preventDefault()	Function	N/A	DOM使用該方法來阻止事件的預設行為
screenX	screenX	Integer	IE：R/W、DOM：R	滑鼠指標相對於「整個電腦螢幕」的X座標值
screenY	screenY	Integer	IE：R/W、DOM：R	滑鼠指標相對於「整個電腦螢幕」的Y座標值
shiftKey	shiftKey	Boolean	IE：R/W、DOM：R	按下Shift鍵則為true
srcElement	target	Element	IE：R/W、DOM：R	引起事件的元素／物件
type	type	String	IE：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 數值表

數值	IE	DOM
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。