事件对象（事件参数对象，event对象）
1, 什么是事件对象
    任何一个事件触发后都会包含一个event对象
    event对象中包含与当前事件相关的一些属性和方法。
2, 获取event对象
    1， 在HTML中绑定事件
        <标记 on事件名="btn(event)">
        eg:
        <div οnclick="funName(event)">
        function btn(event){
            事件处理函数
        }
        注意：
            1，event名字不可以更改；
            2，事件处理函数中需要带上event形参
    2, JS中动态为元素绑定事件
        var ele = document.getElementById('id');
        ele.onclick = function(event){
            event表示的就是事件对象；
        }
    3， 事件对象的常用属性
        1， 事件源
            1， 触发当前事件的元素；就是事件源， 一般是标记
            2， 获取事件源
                通过event.target获取事件源，事件源是一个DOM对象；
                (动态绑定中，同this)
        2， 鼠标事件的常用属性
            鼠标事件--click,mouseover,mouseout,mousemove
            鼠标事件属性：
            1，元素位置：
                offsetX 和 offsetY 用于获取鼠标在元素上的坐标点
                元素左上角为(0,0)开始计算
            2， 网页位置：
                clientX, clientY 获取鼠标在网页上的坐标点
                以整个网页左上角为(0,0)点开始计算
            3， 屏幕位置：
                screenX, screenY 获取鼠标在屏幕上的坐标点
                以整个屏幕左上角为(0,0)点开始计算
        3, 键盘事件的常用属性
            键盘事件 -- keydown, keypress, keyup
            1, keypress事件
                只有在输入字符的条件下才会被激发
                1， which :
                    当前按下字符的ASCII码
                2， key
                    当前按下的字符
                注意： 该事件允许通过一个返回值，通知元素是否要处理该事件；
                返回值为true，则正常显示输入的字符；返回值为false则终止显示；
            2, keydown事件
                只要按下键盘键位的时候就会被触发，无论是否有字符的输入；
                1, which: 记录的是键位码，不是ASCII码；
                    只区分按键，不区分大小写；
                    大小写字符是同一键位，所以键位码相同；
                返回值同keypress
 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>事件对象</title>
  <style>
	#d1,#d2,#d3{
		height:200px;
		width:200px;
		background:pink;
	}
	#d2{
		background:yellow;
	}
	#d23{
		position: relative;
		height:200px;
		width:420px;
	}
	#d3{
		position:absolute;
		background:green;
		top:0px;
		right:0px;
		display:none;
		text-align:center;
		line-height:200px;
	}
  </style>
 </head>
 <body>
	<div id='d1'>鼠标事件</div>
	<div id='d23'>
		<div id='d2' >鼠标放大效果</div>
		<div id='d3'></div>
	</div>
	<p>
		keypress <input type="text" name='uname' id='uname' ><br>
		keydown <input type="text" name='nickname' id='nickname' >
	</p>
	<script>
		//获取事件
		var eleDiv = document.getElementById('d1');
		var eleD2 = document.getElementById('d2');
		var eleD3 = document.getElementById('d3');
		eleDiv.onclick = function(event){
			console.log(event.target);
			console.log(this);
		}
		//鼠标移动事件
		eleDiv.onmousemove = function(event){
			console.log('元素位置：',event.offsetX,event.offsetY);
			console.log('网页位置：',event.clientX, event.clientY);
			console.log('屏幕位置：', event.screenX, event.screenY);
		}
		//鼠标移入事件
		eleD2.onmouseover = function(){
				eleD3.style.display = 'block';	
		}
		//鼠标移动事件
		eleD2.onmousemove = function(event){
				eleD3.innerText = event.offsetX + 'X' + event.offsetY;
		}
		//鼠标移除事件
		eleD2.onmouseout = function(){
				eleD3.style.display = 'none';
		}
		//键盘事件,只允许输入数字
		document.getElementById('uname').onkeypress = function(event){
			if (event.which >= 48 && event.which <=57 )
			{
				return true;
			}
			return false;
		}
		document.getElementById('nickname').onkeydown = function(event){
			console.log(event);
		}
	</script>	
 </body>
</html>