事件基础

  JavaScript 事件是由访问 Web 页面的用户引起的一系列操作。
  当用户执行某些操作的时候，再去执行一系列代码。或者用来获取事件的详细信息，如鼠标位置、键盘按键等。

事件处理函数

  javaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件
  所有的事件处理函数都会都有两个部分组成，on + 事件名称,函数体

1、鼠标事件

onclick      用户单击鼠标按钮或按下回车键时触发
ondblclick   用户双击主鼠标按钮时触发

onmousedown  用户按下鼠标还未弹起时触发
onmouseup    用户释放鼠标按钮时触发
// onm ousedown和onmouseup可看做是单击鼠标事件的分解动作

onmouseover  鼠标移到某个元素上方时触发
onmouseout   鼠标移出某个元素上方时触发
onmousemove  鼠标指针在元素上移动时触发

onmouseenter  onm ouseleave
也是鼠标移入移出事件，但不支持事件冒泡

2、HTML事件

onload       页面或者资源完全加载后在 window 上面触发，
	或框架集加载完毕后在框架集上触发。

onselect     用户选择文本框(input 或 textarea)中的一个或多个字符触发
onchange     文本框(input 或 textarea)内容改变且失去焦点后触发

onfocus      页面或者元素获得焦点时在 window 及相关元素上面触发	
onblur       页面或元素失去焦点时在 window 及相关元素上触发

onsubmit     用户点击提交按钮在<form>元素上触发
onreset      用户点击重置按钮在<form>元素上触发

onresize     窗口或框架的大小变化时在 window 或框架上触发
onscroll     用户滚动带滚动条的元素时触发

3、键盘事件

onkeydown    用户按下键盘上任意键触发，如果按住不放，会重复触发
onkeypress   用户按下键盘上的字符键触发，如果按住不放，会重复触发
onkeyup      用户释放键盘上的键触发

组合键ctrkey、altkey、shiftkey
altKey属性，bool类型，表示发生事件的时候alt键是否被按下
ctrlKey属性，bool类型，表示发生事件的时候ctrl键是否被按下
shiftKey属性，bool类型，表示发生事件的时候shift键是否被按下

keyCode/which兼容  获取用户按下键盘的哪个键

贪吃蛇小案例：通过键盘上下左右键控制div的移动

<div id="outer">
	<div id="box"></div>
</div>
<script type="text/javascript">
	var oBox = document.getElementById("box");
	document.onkeydown = function(e){
		var evt = e || window.event;
		switch(evt.keyCode){
			case 37:  // 左移
				oBox.style.left = oBox.offsetLeft-20+"px";
				break;
			case 38:  // 上移
				oBox.style.top = oBox.offsetTop-20+"px";
				break;
			case 39:  // 右移
				oBox.style.left = oBox.offsetLeft+20+"px";
				break;
			case 40:  // 下移
				oBox.style.top = oBox.offsetTop+20+"px";
				break;
		}
	}
</script>

事件对象

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

通过事件绑定的执行函数是可以得到一个隐藏参数的 。
说明，浏览器会自动分配一个参数，这个参数其实就是 event 对象。

兼容性代码获取事件对象
oBox.onclick = function(e){
	var evt = e || window.event;
}

// 距离可视区域的左边距距离,上边距距离
console.log(evt.clientX,evt.clientY);
				
// 距离页面的左边距距离,上边距距离
console.log(evt.pageX,evt.pageY);
				
// 距离事件源的左边距距离,上边距距离
console.log(evt.offsetX,evt.offsetY);
		
// 距离电脑显示屏幕的左边距距离,上边距距离
console.log(evt.screenX,evt.screenY);

事件冒泡

事件流 事件的传播顺序
事件源 直接触发某个事件的DOM对象
冒泡 事件由最特定的目标到最不特定的目标的一个传播过程

<div id="outer">
	<div id="inner"></div>
</div>
<script type="text/javascript">
	var outer = document.getElementById("outer");
	var inner = document.getElementById("inner");
	document.onclick = function(e){
		var evt = e || event;
		// 得到事件源
		console.log(evt.target || evt.srcElement);

		//兼容性的写法
		if(evt.stopPropagation){
			//针对于现代浏览器的
			evt.stopPropagation();
		}else{
			//最初是针对于IE
			evt.cancelBubble = true;
		}		
	}
</script>