快捷導航

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

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

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

C 事件對象
i > 在IE 瀏覽器中，事件對象是window 對象的一個屬性event 。訪問方式如下：

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

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

ii > 在標準的DOM 中，事件對象是作為處理函數(shù)的唯一參數(shù)來獲得。訪問方式如下：

復制代碼代碼如下:

 
function getEvent(_event){ 
var o_event = _event 
} 

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

復制代碼代碼如下:

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

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

IE	標準DOM	說明
cancelBubble	cancelBubble	是否冒泡(標準DOM中只讀)
無	stopPropagation( )	阻止事件向上冒泡的方法
無	charCode	按下按鍵的Unicode 值
keyCode	keyCode	IE 中keypress 事件時表示按鍵的Unicode 值；標準DOM 中keypress 事件時為0；其余情況下，keyCode 為按鍵的數(shù)字代號。
srcElement	target	觸發(fā)事件的元素(對象源)
type	type	事件的名稱

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

復制代碼代碼如下:

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

D 鍵盤事件

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

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

復制代碼代碼如下:

 
<html> 
<head> 
<title>鍵盤事件</title> 
<script language="javascript"> 
function handle(oEvent){ 
if(window.event){ 
//處理兼容性，獲得事件對象 
oEvent = window.event; 
//設(shè)置IE的charCode值 
oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0; 
} 
var oDiv = document.getElementById("display"); 
//輸出測試 
oDiv.innerHTML += oEvent.type // 事件名稱 
+ ": charCode:" + oEvent.charCode // 字符碼 charCode 
+ " keyCode:" + oEvent.keyCode + "<br>"; // 鍵盤碼 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 > 屏蔽鼠標右鍵
方法一：
通過鼠標事件中，判斷event 對象的button 屬性值為“2”來屏蔽鼠標右鍵。雖然這種方法在IE 瀏覽器中有效，但在標準的DOM 中無效。并且，鼠標事件中，button 屬性的值在IE 瀏覽器和標準的DOM 中大部分都不相同！
方法二：
其實，點擊鼠標右鍵會觸發(fā)右鍵菜單contextmenu 事件。
所以，屏蔽鼠標右鍵最有效的辦法就是屏蔽document 對象的contextmenu 事件。
代碼如下：

復制代碼代碼如下:

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

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

復制代碼代碼如下:

 
<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; 
// 鼠標右鍵 
if(_event.button == 2) 
{ 
// _event.clientX 獲得鼠標當前的 X 坐標 
/* 注意： 
_event.clientX 的值在標準的DOM 中“只讀” 
myDIV.style.pixelLeft 不是標準的DOM 屬性 
*/ 
myDIV.style.left = _event.clientX; 
myDIV.style.top = _event.clientY; 
myDIV.style.display = "block"; 
} 
// 不是鼠標右鍵 
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> 