JS事件基礎
1.event對象
（1）用來擷取事件的詳細資訊：滑鼠位置、鍵盤位置
document的本質：document.childNodes[0].tagName
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function()
{
document.onclick=function()
{
alert(event.clientX+','+event.clientY);
}
}
</script>
</head>
<body>
</body>
</html>
以上代碼會有相容問題
alert(event.clientX+','+event.clientY);大部分适合IE
把上面代碼換成alert(ev.clientX+','+ev.clientY);适用于火狐，不支援IE
現在怎麼解決相容問題呢？代碼如下
document.onclick=function(ev)
//alert(event.clientX+','+event.clientY);适用于IE
//alert(ev.clientX+','+ev.clientY);//适用于火狐
var oEvent=ev||event;//報錯ev不存在
alert(oEvent.clientX+','+oEvent.clientY);
};
以上總結出解決event對象的相容性方法就是
設定一個變量 var oEvent=en||event
2事件冒泡： 事件冒泡就是會把事件一直傳遞給父級，一直到document，小知識document是一個隐藏起來的最大父級
事件冒泡例子：代碼如下
<style>
div{
padding:50px;
}
</style>
<body onclick="alert('aa')">
這個例子就是說明子級的事件會傳遞給父級，這就是事件冒泡
<div style="background:black;" onclick="alert(this.style.background)">
<div style="background:green;" onclick="alert(this.style.background)">
<div style="background:red; "onclick="alert(this.style.background)"></div>
</div>
</div>
執行上面代碼點選一下最裡面的紅色就懂了
3.鍵盤事件
KeyCode：擷取使用者按下鍵盤的哪個按鍵
用法代碼：
<script>
document.onkeydown=function(ev)
var oEvent=ev||event;
alert(oEvent.keyCode);
</script>
執行以上代碼随便按下某個鍵就會報出數字，這個數字就對應這個按鍵
例子2：如何使用按鍵回車送出某個資訊
var oBun1=document.getElementById('bu1');
var oBun3=document.getElementById('text1')
oBun1.onkeydown=function(ev)
{
var oEvent=ev||event;
if(event.keyCode==13)
oBun3.value=oBun3.value+oBun1.value;
oBun1.value=''
}
}
<input id="bu1" type="text" />
<textarea id="text1" rows="10" cols="40"></textarea>
還有如何使用ctry+回車送出
隻需要把如上代碼if部分改為
if(event.keyCode==13 || oEvent.ctrlkey)
keyCode其他屬性
ctrlKey、shiftKey、altKey
本文轉自
新網學會 51CTO部落格，原文連結：http://blog.51cto.com/xwxhvip/1983467 ，如需轉載請自行聯系原作者
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)