快捷導(dǎo)航

關(guān)于JavaScript 的事件綜合分析

更新時(shí)間：2010年08月10日 00:48:48 作者：

js下比較常用的方法，事件函數(shù)代碼。

C 事件對(duì)象
i > 在IE 瀏覽器中，事件對(duì)象是window 對(duì)象的一個(gè)屬性event 。訪問(wèn)方式如下：

 
function getEvent(){ 
var o_event = window.event; 
} 

event 對(duì)象在事件發(fā)生時(shí)被訪問(wèn)，執(zhí)行完函數(shù)后就消失了。

ii > 在標(biāo)準(zhǔn)的DOM 中，事件對(duì)象是作為處理函數(shù)的唯一參數(shù)來(lái)獲得。訪問(wèn)方式如下：

復(fù)制代碼代碼如下:

 
function getEvent(_event){ 
var o_event = _event 
} 

因此，為了兼容各種瀏覽器，通常采用如下方法：

復(fù)制代碼代碼如下:

 
function getEvent(_event){ 
// Firefox下參數(shù)_event 就是event對(duì)象 
// IE 下獲得 event對(duì)象 
if(window.event)_event = window.event; 
// 顯示觸發(fā)的事件名稱(chēng) 
alert(_event.type); 
} 

下面列出了事件常用的幾個(gè)屬性和方法（區(qū)別）：

IE	標(biāo)準(zhǔn)DOM	說(shuō)明
cancelBubble	cancelBubble	是否冒泡(標(biāo)準(zhǔn)DOM中只讀)
無(wú)	stopPropagation( )	阻止事件向上冒泡的方法
無(wú)	charCode	按下按鍵的Unicode 值
keyCode	keyCode	IE 中keypress 事件時(shí)表示按鍵的Unicode 值；標(biāo)準(zhǔn)DOM 中keypress 事件時(shí)為0；其余情況下，keyCode 為按鍵的數(shù)字代號(hào)。
srcElement	target	觸發(fā)事件的元素(對(duì)象源)
type	type	事件的名稱(chēng)

此處只列出了事件成員的一小部分。
注意：
在IE 瀏覽器中，獲得觸發(fā)事件的對(duì)象源（HTML標(biāo)簽）是通過(guò)event 對(duì)象的srcElement 屬性；
在標(biāo)準(zhǔn)的DOM 中，獲得觸發(fā)事件的對(duì)象源（HTML標(biāo)簽）是通過(guò)event 對(duì)象的target 屬性；
獲取事件目標(biāo)的示例：

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title>事件的目標(biāo)</title> 
<script language="javascript"> 
function handle(oEvent){ 
//處理兼容性，獲得事件對(duì)象 
if(window.event) oEvent = window.event; 
var oTarget; 
//處理兼容性，獲取事件目標(biāo) 
if(oEvent.srcElement) 
oTarget = oEvent.srcElement; 
else oTarget = oEvent.target; 
//彈出目標(biāo)的標(biāo)記名稱(chēng) 
alert(oTarget.tagName); 
} 
window.onload = function(){ 
var obj = document.getElementsByTagName("a")[0]; 
obj.onclick = handle; 
} 
</script> 
</head> 
<body> 
<a href="#">獲得事件源的示例</a> 
</body> 
</html> 

D 鍵盤(pán)事件

事件	說(shuō)明
keydown	按下鍵盤(pán)上的某個(gè)鍵觸發(fā)。（一直按住某鍵則會(huì)持續(xù)觸發(fā)）
keypress	按下某個(gè)按鍵并產(chǎn)生字符時(shí)觸發(fā)。（即忽略Shift 、Alt 、Ctrl 等功能鍵）
keyup	釋放某個(gè)按鍵時(shí)觸發(fā)。

觸發(fā)的順序?yàn)椋簁eydown ---> keypress ---> keyup
i > 關(guān)于keyCode屬性和charCode 屬性
keyCode屬性：表示鍵盤(pán)按鍵碼。因此輸入“a”字母和“A”字母時(shí)，都是顯示鍵盤(pán)碼 65 ；
charCode 屬性：表示輸入字符碼。因此輸入“a”字母和“A”字母時(shí)，
分別顯示 97（a 字符碼）和 65（A 字符碼）；
注意：
在標(biāo)準(zhǔn)的DOM 中：既有keyCode屬性，還有charCode 屬性。
但在標(biāo)準(zhǔn)的DOM 中，keypress 事件中keyCode 屬性值始終為0 值；
在IE 瀏覽器中：事件對(duì)象只有keyCode屬性，沒(méi)有charCode 屬性。
但在IE 瀏覽器中，keypress 事件中的keyCode 屬性值等同于標(biāo)準(zhǔn)DOM 中的charCode 屬性的值；
示例代碼：

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title>鍵盤(pán)事件</title> 
<script language="javascript"> 
function handle(oEvent){ 
if(window.event){ 
//處理兼容性，獲得事件對(duì)象 
oEvent = window.event; 
//設(shè)置IE的charCode值 
oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0; 
} 
var oDiv = document.getElementById("display"); 
//輸出測(cè)試 
oDiv.innerHTML += oEvent.type // 事件名稱(chēng) 
+ ": charCode:" + oEvent.charCode // 字符碼 charCode 
+ " keyCode:" + oEvent.keyCode + "<br>"; // 鍵盤(pán)碼 keyCode 
} 
window.onload = function(){ 
var oTextArea = document.getElementsByTagName("textarea")[0]; 
oTextArea.onkeypress = handle; 
oTextArea.onkeydown = handle; 
} 
</script> 
</head> 
<body> 
<textarea rows="4" cols="50"></textarea> 
<div id="display"></div> 
</body> 
</html> 

ii > 屏蔽鼠標(biāo)右鍵
方法一：
通過(guò)鼠標(biāo)事件中，判斷event 對(duì)象的button 屬性值為“2”來(lái)屏蔽鼠標(biāo)右鍵。雖然這種方法在IE 瀏覽器中有效，但在標(biāo)準(zhǔn)的DOM 中無(wú)效。并且，鼠標(biāo)事件中，button 屬性的值在IE 瀏覽器和標(biāo)準(zhǔn)的DOM 中大部分都不相同！
方法二：
其實(shí)，點(diǎn)擊鼠標(biāo)右鍵會(huì)觸發(fā)右鍵菜單contextmenu 事件。
所以，屏蔽鼠標(biāo)右鍵最有效的辦法就是屏蔽document 對(duì)象的contextmenu 事件。
代碼如下：

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title>屏蔽鼠標(biāo)右鍵</title> 
<script language="javascript"> 
function block(oEvent){ 
if(window.event){ 
oEvent = window.event; 
// IE 取消默認(rèn)事件 
oEvent.returnValue = false; 
} 
else 
// Firefox 取消默認(rèn)事件 
oEvent.preventDefault(); 
} 
// 右鍵菜單事件 
document.oncontextmenu = block; 
</script> 
</head> 
<body> 
<p>屏蔽鼠標(biāo)右鍵</p> 
</body> 
</html> 

IE 瀏覽器是通過(guò)returnValue 屬性屏蔽右鍵菜單；
標(biāo)準(zhǔn)DOM 是通過(guò)preventDefault( ) 方法屏蔽右鍵菜單；
iii > 自定義鼠標(biāo)右鍵菜單
代碼如下：

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title> demo </title> 
<meta name="Author" content="xugang" /> 
<script type="text/javascript"> 
<!-- 
// 一、屏蔽系統(tǒng)右鍵菜單 
window.document.oncontextmenu = function(_event){ 
if (window.event){ 
_event = window.event; 
window.event.returnValue=false; 
window.event.cancelBubble=true; 
} 
else _event.preventDefault(); 
} 
//二、添加自定義右鍵菜單 
window.document.onmouseup = function(_event) 
{ 
var myDIV = document.getElementById("myDIV"); 
// 瀏覽器兼容性 
if (window.event)_event = window.event; 
// 鼠標(biāo)右鍵 
if(_event.button == 2) 
{ 
// _event.clientX 獲得鼠標(biāo)當(dāng)前的 X 坐標(biāo) 
/* 注意： 
_event.clientX 的值在標(biāo)準(zhǔn)的DOM 中“只讀” 
myDIV.style.pixelLeft 不是標(biāo)準(zhǔn)的DOM 屬性 
*/ 
myDIV.style.left = _event.clientX; 
myDIV.style.top = _event.clientY; 
myDIV.style.display = "block"; 
} 
// 不是鼠標(biāo)右鍵 
else myDIV.style.display = "none"; 
} 
//--> 
</script> 
</head> 
<body> 
<!-- 我的右鍵菜單 --> 
<div id="myDIV" style="position:absolute; height:180px; width:200px; 
background-color:#CCCCCC; display:none;"> 
<a  target="_blank">xugang</a> 
</div> 
</body> 
</html> 