js 事件对象（一）

一、什么是事件对象

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

【举例】

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

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

document.onclick = function(ev){
	var oEvent = ev || event;   
}
//clientX 鼠标在可视区X轴的位置，clientY 鼠标在可视区Y轴的位置
document.onclick = function(ev){
	var oEvent = ev || event; 
	console.log(oEvent.clientX+"--"+oEvent.clientY);
}

/*
 * scrollTop:获取滚动条相对于其顶部的偏移
 * scrollLeft:获取滚动条相对于其最左的偏移
 * 一般clientY 和 scrollTop配合使用
*/
//跟随鼠标的DIV实例
document.οnmοusemοve=function (ev){
	var oEvent=ev||event;
	var oDiv=document.getElementById('div1');
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

	oDiv.style.left=oEvent.clientX+scrollLeft+'px';
	oDiv.style.top=oEvent.clientY+scrollTop+'px';
};

三、鼠标事件和键盘事件

1、鼠标事件

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

2、键盘事件

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

document.οnkeydοwn=function (ev){
	var oEvent=ev||event;
	alert(oEvent.keyCode);
};

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

//ctrl+回车 提交
window.onload = function(){
	var oTxt1=document.getElementById('txt1');
	var oTxt2=document.getElementById('txt2');

	//oEvent.ctrlKey 返回的是布尔值
	oTxt2.οnkeydοwn=function (ev){
		var oEvent=ev||event;
		if(oEvent.ctrlKey && oEvent.keyCode==13){   //keyCode == 13 : 代表回车键
			oTxt1.value+=oTxt2.value+'\n';
			oTxt2.value='';
		}
	}
}
<textarea id="txt1" rows="10" cols="40"></textarea><br />
<input id="txt2" type="text" />