js 事件对象（一）

一、什么是事件对象

在触发DOM上的某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。
包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。

【举例】

鼠标操作导致的事件对象中，会包含鼠标位置的信息，
键盘操作导致的事件对象中，会包含按下的键有关的信息

二、事件对象的兼容性问题及解决方案

[javascript] view plain copy

1. document.onclick = function(ev){  
2.     var oEvent = ev || event;     
3. }  
4. //clientX 鼠标在可视区X轴的位置，clientY 鼠标在可视区Y轴的位置  
5. document.onclick = function(ev){  
6.     var oEvent = ev || event;   
7.     console.log(oEvent.clientX+"--"+oEvent.clientY);  
8. }  
9.   
10. /* 
11.  * scrollTop:获取滚动条相对于其顶部的偏移 
12.  * scrollLeft:获取滚动条相对于其最左的偏移 
13.  * 一般clientY 和 scrollTop配合使用 
14. */  
15. //跟随鼠标的DIV实例  
16. document.onmousemove=function (ev){  
17.     var oEvent=ev||event;  
18.     var oDiv=document.getElementById('div1');  
19.     var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;  
20.     var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;  
21.   
22.     oDiv.style.left=oEvent.clientX+scrollLeft+'px';  
23.     oDiv.style.top=oEvent.clientY+scrollTop+'px';  
24. };  

三、鼠标事件和键盘事件

1、鼠标事件

onclick —— 鼠标点击事件
onmousedown —— 鼠标按下事件
onmouseup —— 鼠标抬起事件
onclick = onmousedown + onmouseup;

2、键盘事件

onkeypress —— 键盘点击事件
onkeydown —— 键盘按下事件
onkeyup —— 键盘抬起事件
keyCode 事件属性 ：获取按下的键盘按键Unicode值

[javascript] view plain copy

1. document.onkeydown=function (ev){  
2.     var oEvent=ev||event;  
3.     alert(oEvent.keyCode);  
4. };  

3、其他属性：ctrlKey,shiftKey,altKey

[javascript] view plain copy

1. //ctrl+回车 提交  
2. window.onload = function(){  
3.     var oTxt1=document.getElementById('txt1');  
4.     var oTxt2=document.getElementById('txt2');  
5.   
6.     //oEvent.ctrlKey 返回的是布尔值  
7.     oTxt2.onkeydown=function (ev){  
8.         var oEvent=ev||event;  
9.         if(oEvent.ctrlKey && oEvent.keyCode==13){   //keyCode == 13 : 代表回车键  
10.             oTxt1.value+=oTxt2.value+'\n';  
11.             oTxt2.value='';  
12.         }  
13.     }  
14. }  
15. <textarea id="txt1" rows="10" cols="40"></textarea><br />  
16. <input id="txt2" type="text" />