对常用的JavaScript的event对象进行总结:可直接复制代码运行,具体请看注释。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>event对象使用总结</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.test {
width: 200px;
height: 200px;
margin: 200px 100px 0 750px;
padding: 10px;
background: #6C902F;
}
#info {
position: fixed;
left: 5px;
top: 5px;
width: 500px;
padding: 20px;
border: 1px solid #6C902F;
background: #FFF;
}
#text{
margin:50px auto 0;
width:200px;
}
</style>
<script type="text/javascript" >

window.onload = function() {

var oPar = document.getElementById("event");
var info = document.getElementById("info");
var oInput = document.getElementById("text");
oPar.onclick = function(event){

//IE中为window.event
var event = event || window.event;

//事件源,就是发生事件的元素; ie下为event.srcElement
var element = event.target || event.srcElement;

//鼠标相对于浏览器窗口可视文档区域的左上角的位置
var client = event.clientX + "--" + event.clientY;

//鼠标相对于文档左上角的位置。非IE下event.pageX
var domClientLeft = event.pageX || event.clientX + document.documentElement.scrollLeft;
var domClientTop = event.pageY || event.clientY + document.documentElement.scrollTop;

//鼠标相对于事件源(event.target || event.srcElement)左上角的位置。非FireFox下 event.offsetX
var offsetX = event.offsetX || event.pageX - element.offsetLeft;
var offsetY = event.offsetY || event.pageY - element.offsetTop;

//鼠标相对于用户屏幕的左上角位置
var screenY = event.screenY;
var screenX = event.screenX;

info.innerHTML = "clientXY:" + client + "</br>"
+ "DOMClenntXY:" + domClientLeft + "--" + domClientTop + "</br>"
+ "OffsetXY:" + offsetX + "--" + offsetY + "</br>"
+ "screenXY:" + screenX + "--" + screenY + "</br>"
+ "altKey:" + event.altKey + "</br>"
+ "shiftKey:" + event.shiftKey + "</br>"
+ "ctrlKey:" + event.ctrlKey + "</br>"
+ "type:" + event.type;

}

oInput.onclick = function(event){

var event = event || window.event;

//cancelBubble设为true 阻止事件冒泡 ,不被上层原素的事件控制。
event.cancelBubble = true;

}

oInput.onkeydown = function(event){

var event = event || window.event;

//检测键盘事件相对应的内码。
var keyCode = event.keyCode;
alert(keyCode)
}

}
</script>

</head>

<body>

<div id="info"> </div>
<div id="event">
<input type="text" id="text" value="event常用对象总结" />
</div>

</body>
</html>