（三）简析JS中事件，事件绑定，事件冒泡，事件捕获和事件执行顺序
前面我们讲到了事件绑定之冒泡和捕获以及如何移除普通事件以及事件监听：https://mp.****.net/postedit/102685007
我们一起来复习一下：
事件分为三个阶段：事件捕获-事件目标-事件冒泡
事件捕获：事件发生时，首先发生在document上，然后依次传递给body ,html,...最后到达目的节点（事件目标）
事件冒泡：事件到达事件目标之后不会结束，会逐层向上冒泡，直至document对象，跟事件捕获相反
为页面元素添加事件：
1）在html标签里面或通过赋值的方式创建onclick事件 ，重写onclick会覆盖之前的属性，不存在兼容性问题
element.onclick = function(){}
解绑事件：element.onclick = null
2）addEventListener;IE8以下不支持，属于DOM2级方法，可以添加多个方法不被覆盖
element.addEventListener('click',function(e){
e.preventDefault();//阻止默认事件
},false)
解绑事件：element.removeEventListener('click',function(){},false)
3）attachEvent,IE特有，兼容IE8及以下版本，可添加多个事件处理程序，只支持冒泡阶段
element.attachEvent('onclick',function(e){
e.returnValue = false;//阻止默认事件
})
解绑事件：element.detachEvent("onclick",function(){})
接下来我们一起来了解一下JS事件类型，好开始我们今天的学习。
web浏览器中可能发生的事件类型有很多种，我们可以将它们分为以下几种常用的事件类型：
1）UI（用户界面）事件，当用户与页面上的元素交互时触发，主要包括：
a）load 加载
当页面完全加载完之后（包括所有的图像，JS文件，CSS文件等外部资源），就会触发window上的load事件。
b）unload 重载
在文档被完全卸载后触发，用户从一个页面切换到另一个页面就会出触发unload事件，一般是在清除引用时使用unload事件，避免内存泄露（我也不清楚这一点，先留个bug）
unload事件也有两种指定方式，第一种是JS方式，使用EventUtil.addHandler();另外一种就是在body元素中添加一个属性。unload是在页面卸载后触发，页面加载后存在的对象，在unload触发后可能就不存在（跟所写代码有关，需谨慎）
<body οnlοad="alert('changed')">
c）resize 改变浏览器尺寸
当浏览器窗口大小改变时就会触发resize事件，这个事件在window（窗口）上触发
<body οnresize="alert('changed')">//浏览器窗口大小发生改变时会弹出窗口
d）scroll 使用滚动条
在文档被滚动期间重复触发，
2）鼠标与键盘事件
click 用户单击鼠标或按下回车键 dclick 用户双击鼠标左键
mousedown 用户按下任意鼠标按钮时触发
mouseup 松开 用户释放鼠标按钮时触发
mouseenter 划进（鼠标光标从元素外部首次移动到元素范围内时触发。此事件不冒泡）
mouseleave 划出（元素上方的光标移动到元素范围之外时触发，不冒泡）
mouseover 划进
mouseout 划出
mousemove 移动 光标在元素内部不断的移动时触发
keydown 按下（按所有键都会触发）检测用户是否按了键盘上的按键
keypress 按下（按字符集触发）用来检测用户输入了什么字符（回车keycode==13）
keyup 松开
3）焦点事件
焦点事件会在页面元素获得或失去焦点时触发：
blur 在元素失去焦点时触发。这个事件不冒泡，所有浏览器都支持。
focus 在元素获得焦点时触发。这个事件不冒泡，所有浏览器都支持。
focusin 在元素获得焦点时触发。这个事件冒泡,某些浏览器不支持。
focusout 在元素失去焦点时触发。这个事件冒泡，某些浏览器不支持。
即使blur和focus不冒泡，也可以在捕获阶段侦听到他们。