1. 事件基础
JavaScript 事件是由访问 Web 页面的用户引起的一系列操作。
当用户执行某些操作的时候，再去执行一系列代码。或者用来获取事件的详细信息，如鼠标位置、键盘按键等。
2. 事件处理函数
javaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件
所有的事件处理函数都会都有两个部分组成，on + 事件名称。
2.1 鼠标事件
onclick:用户单击鼠标按钮或按下回车键时触发
ondblclick:当用户双击主鼠标按钮时触发
onmousedown:当用户按下鼠标还未弹起时触发
onmouseup：当用户释放鼠标按钮时触发
onmouseover：当鼠标移到某个元素上方时触发
onmouseout：当鼠标移出某个元素上方时触发
onmousemove：当鼠标指针在元素上移动时触发
2.2 HTML 事件
onload：当页面或者资源完全加载后在 window 上面触发，或当框架集加载完毕后在框架集上触发。
onselect：当用户选择文本框(input 或 textarea)中的一个或多个字符触发
onchange：当文本框(input 或 textarea)内容改变且失去焦点后触发
onfocus：当页面或者元素获得焦点时在 window 及相关元素上面触发
onblur：当页面或元素失去焦点时在 window 及相关元素上触发
onsubmit：当用户点击提交按钮在<form>元素上触发
onreset：当用户点击重置按钮在<form>元素上触发
onresize：当窗口或框架的大小变化时在 window 或框架上触发
onscroll：当用户滚动带滚动条的元素时触发
事件对象
当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息 。包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用，函数不会在事件发生前被执行！通过事件绑定的执行函数是可以得到一个隐藏参数的 。说明，浏览器会自动分配一个参数，这个参数其实就是 event 对象。
event对象获取方式
function demo1(e){
//var evt = e || window.event;
var evt = e || event;
//此种方法在ie中和google中可以不传参数e也可以获取到event，但是在火狐中必须在事件方法中传递event参数
//才可以获取到event对象。
}和事件对象相关的一些属性
event.button属性 当前事件触发时哪个鼠标按键被点击
clientX、clientY属性 鼠标在可视区X坐标和Y坐标，即距离左边框和上边框的距离
screenX、screenY属性 鼠标在屏幕区X坐标和Y坐标，即距离左屏幕和上屏幕的距离 （不常用）
offsetX、offsetY属性 鼠标相对于事件源的X坐标和Y坐标
pageX、pageY 鼠标相对于文档的X坐标和Y坐标
2.3 键盘事件
onkeydown：当用户按下键盘上任意键触发，如果按住不放，会重复触发
onkeypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发
onkeyup：当用户释放键盘上的键触发
3.事件的冒泡
事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。事件冒泡是自下而上的去触发事件。
默认情况下，事件使用冒泡事件流。当事件（例如单击事件）在某一DOM元素上被触发时，事件将沿着该节点的各个父结点冒泡穿过整个DOM节点层次。在冒泡过程中的任何时候都可以终止事件的冒泡。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。
事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。在捕获事件流模型中，事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有所有祖先元素依次往下传递。在这个过程中，事件会被从文档的根到事件目标元素之间各个继承派生的元素所捕获。
上代码比较容易懂
<div id="red"> // 红框套绿框，css就不粘了
<div id="green">
</div>
</div>
<script type="text/javascript">
var oRed = document.getElementById("red");
var oGreen = document.getElementById("green");
oGreen.onclick = function(e){
console.log("green");
}
oRed.onclick = function(e){
console.log("red");
}
document.body.onclick = function(e){
console.log("body");
}
</script>//点击绿的div，控制台输出 green red body;
//点击红的大div去除绿div的区域，控制台输出 red body;
//点击空白区域，控制台输出body。
//我理解的冒泡就是渗透，从高往低，由外而内，如果不阻止的话就直达最深处
取消冒泡 的方法
oGreen.onclick = function(e){
var evt = e || event;
//evt.cancelBubble = true; //第一种方法
console.log("green");
}
oRed.onclick = function(e){
var evt = e || event;
evt.stopPropagation(); //第二种方法
console.log("red");
}// 一旦取消冒泡，就不会再向下传递，在当前节点就结束
取消冒泡的兼容性写法
//兼容性的写法
if(evt.stopPropagation){
evt.stopPropagation();//取消冒泡
}else{
evt.cancelBubble = true;//取消冒泡
}