關(guān)于JavaScript 的事件綜合分析
更新時間：2010年08月10日 00:48:48 作者：
js下比較常用的方法，事件函數(shù)代碼。
C 事件對象
i > 在IE 瀏覽器中，事件對象是window 對象的一個屬性event 。訪問方式如下：
復(fù)制代碼 代碼如下:
function getEvent(){
var o_event = window.event;
}
event 對象在事件發(fā)生時被訪問，執(zhí)行完函數(shù)后就消失了。
ii > 在標(biāo)準(zhǔn)的DOM 中，事件對象是作為處理函數(shù)的唯一參數(shù)來獲得。訪問方式如下：
復(fù)制代碼 代碼如下:
function getEvent(_event){
var o_event = _event
}
因此，為了兼容各種瀏覽器，通常采用如下方法：
復(fù)制代碼 代碼如下:
function getEvent(_event){
// Firefox下參數(shù)_event 就是event對象
// IE 下獲得 event對象
if(window.event)_event = window.event;
// 顯示觸發(fā)的事件名稱
alert(_event.type);
}
下面列出了事件常用的幾個屬性和方法（區(qū)別）：
| IE | 標(biāo)準(zhǔn)DOM | 說明 |
| cancelBubble | cancelBubble | 是否冒泡(標(biāo)準(zhǔn)DOM中只讀) |
| 無 | stopPropagation( ) | 阻止事件向上冒泡的方法 |
| 無 | charCode | 按下按鍵的Unicode 值 |
| keyCode | keyCode | IE 中keypress 事件時表示按鍵的Unicode 值； 標(biāo)準(zhǔn)DOM 中keypress 事件時為0； 其余情況下，keyCode 為按鍵的數(shù)字代號。 |
| srcElement | target | 觸發(fā)事件的元素(對象源) |
| type | type | 事件的名稱 |
注意：
在IE 瀏覽器中，獲得觸發(fā)事件的對象源（HTML標(biāo)簽）是通過event 對象的srcElement 屬性；
在標(biāo)準(zhǔn)的DOM 中，獲得觸發(fā)事件的對象源（HTML標(biāo)簽）是通過event 對象的target 屬性；
獲取事件目標(biāo)的示例：
復(fù)制代碼 代碼如下:
<html>
<head>
<title>事件的目標(biāo)</title>
<script language="javascript">
function handle(oEvent){
//處理兼容性，獲得事件對象
if(window.event) oEvent = window.event;
var oTarget;
//處理兼容性，獲取事件目標(biāo)
if(oEvent.srcElement)
oTarget = oEvent.srcElement;
else oTarget = oEvent.target;
//彈出目標(biāo)的標(biāo)記名稱
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ā)。 |
i > 關(guān)于keyCode屬性和charCode 屬性
keyCode屬性： 表示鍵盤按鍵碼。因此輸入“a”字母和“A”字母時，都是顯示鍵盤碼 65 ；
charCode 屬性：表示輸入字符碼。因此輸入“a”字母和“A”字母時，
分別顯示 97（a 字符碼）和 65（A 字符碼）；
注意：
在標(biāo)準(zhǔn)的DOM 中：既有keyCode屬性，還有charCode 屬性。
但在標(biāo)準(zhǔn)的DOM 中，keypress 事件中keyCode 屬性值始終為0 值；
在IE 瀏覽器中：事件對象只有keyCode屬性，沒有charCode 屬性。
但在IE 瀏覽器中，keypress 事件中的keyCode 屬性值等同于標(biāo)準(zhǔn)DOM 中的charCode 屬性的值；
示例代碼：
復(fù)制代碼 代碼如下:
<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 > 屏蔽鼠標(biāo)右鍵
方法一：
通過鼠標(biāo)事件中，判斷event 對象的button 屬性值為“2”來屏蔽鼠標(biāo)右鍵。雖然這種方法在IE 瀏覽器中有效，但在標(biāo)準(zhǔn)的DOM 中無效。并且，鼠標(biāo)事件中，button 屬性的值在IE 瀏覽器和標(biāo)準(zhǔn)的DOM 中大部分都不相同！
方法二：
其實，點(diǎn)擊鼠標(biāo)右鍵會觸發(fā)右鍵菜單contextmenu 事件。
所以，屏蔽鼠標(biāo)右鍵最有效的辦法就是屏蔽document 對象的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 瀏覽器是通過returnValue 屬性屏蔽右鍵菜單；
標(biāo)準(zhǔn)DOM 是通過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>
在IE 瀏覽器和標(biāo)準(zhǔn)DOM 下兼容。
相關(guān)文章
這篇文章主要介紹了Cocos Creator 模塊化腳本，想加深學(xué)習(xí)CocosCreator腳本的同學(xué)，一定要看一下2021-04-04
這篇文章給大家描述的是如何一步步簡單的實現(xiàn)Javascript 字符串模板，對于初學(xué)javascript的菜鳥們來說應(yīng)該是篇不錯的文章，希望對大家能夠有所幫助。2016-02-02
JavaScript代碼實現(xiàn)微博批量取消關(guān)注功能
這篇文章主要介紹了JavaScript代碼實現(xiàn)微博批量取消關(guān)注功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
JavaScript實現(xiàn)向setTimeout執(zhí)行代碼傳遞參數(shù)的方法
這篇文章主要介紹了JavaScript實現(xiàn)向setTimeout執(zhí)行代碼傳遞參數(shù)的方法,分析了向setTimeout傳遞參數(shù)的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
提起購物車想必只有在一些購物網(wǎng)站上才可以看得到，下面為大家介紹下使用js實現(xiàn)的購物車，感興趣的朋友可以參考下2013-12-12
本文通過實例代碼給大家詳細(xì)介紹了js閉包的幾種常見形式，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-09-09
JavaScript實現(xiàn)替換字符串中最后一個字符的方法
這篇文章主要介紹了JavaScript實現(xiàn)替換字符串中最后一個字符的方法,涉及javascript字符串的轉(zhuǎn)換與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
indexOf是在一個字符串中尋找一個字的位置，lastIndexOf 也是找字 , 它們倆的區(qū)別是前者從字符串頭開始找，后者是從字符串末端開始找2014-09-09
extjs 04_grid 單擊事件新發(fā)現(xiàn)
EXTJS GRID 中單擊行和單元格獲得行或者單元格的內(nèi)容(數(shù)據(jù)),本文將整理此功能的應(yīng)用，需要了解的朋友可以參考下2012-11-11
這篇文章主要介紹了JS封裝通過className獲取元素的函數(shù),涉及javascript針對頁面元素屬性的遍歷與數(shù)組相關(guān)操作技巧,需要的朋友可以參考下2016-12-12