一、什么是事件
事件就是一件事情或者一个行为（对于元素来说，它的很多事件都是天生自带的），只要我们去操作这个元素，就会触发这些行为。
“事件就是元素天生自带的行为，我们操作元素，就会触发相关的时间行为”
二、事件绑定
给元素天生自带的事件行为绑定方法，当事件触发，会把对应的方法执行。
三、元素天生自带的事件（常用）
【鼠标事件】
click:点击（PC端是点击，移动端的click代表单机[移动端使用click会有300ms延迟的问题]）
dbclick:双击
mouseover:滑过
mouseout:滑出
mouseenter:进入
mouseleave:离开
mousemove:移动
mousedown:按下（它是按下即触发，click是按下抬起才会触发，而且是先把down和up触发，才会触发click）
mouseup:鼠标抬起
mousewheel:鼠标滚轮滚动
…
【键盘事件】
keydown:键盘按下
keyup:键盘抬起
keypress:和keydown类似，只不过keydown返回的是键盘码，keypress返回的是ASCII码值
input:由于PC端有实体物理键盘，可以监听到键盘的按下和抬起，但是移动端是虚拟键盘，所以keydown和keyup在大部分手机上都没有，我们使用Input事件来统一代替它们。
…
【其他常用事件】
load：加载完成
unload:
beforeunload:
scoll:滚动条滚动事件
resize:大小改变事件 window.onresize = function(){} 当浏览器窗口大小发生改变，会触发这个事件，执行对应的事情
…
【移动端手指事件】
【touch:单手指操作】
touchstart:手指按下
touchmove:手指移动
touchend:手指离开
touchcancel:因为意外情况导致手指操作取消（例如关机）
【gesture:多手指操作】
gesturestart:手指按下
gesturechange:手指改变
gestureend:手指离开
…
四、事件绑定的两种操作方式
【目的】
给当前元素的某个事件绑定方法（不管是DOM0还是DOM2），都是为了触发元素的相关行为，能做点事情（也就是把绑定的方法执行）；“不仅把方法执行了，而且浏览器还给方法传递了一个实参信息值===>这个值就是事件对象”
【DOM 0级事件绑定】
【element】.onXXX = function(){}
【DOM 2级事件绑定】
【element】.addEvenListener('xxx' , function( ) { },false);
【element】.attachEvent('onXXX',function( ) { }); IE 6-8
【例子】
box.onclick = functinon ( ev ) {
==>定义一个形参EV用来接收方法执行的时候，浏览器传递的信息值（事件对象：MouseEvent鼠标事件对象、KeyboardEvent键盘事件对象、Event普通事件对象...）
==>事件对象中记录了很多属性名和属性值，这些信息中包含了当前操作的基础信息，例如：鼠标点击位置的x/Y轴坐标，鼠标点击的是谁（事件源）等信息
【MouseEvent】
ev.target => 事件源（操作的哪个元素）
ev.clientX / ev.clientY : 当前鼠标触发点距离当前窗口左上角的X/Y角轴坐标
ev.pageX / ev.pageY : 当前鼠标触发点距离BODY（第一屏幕）左上角的X/Y轴坐标
ev.preventDefault( ):阻止默认行为
ev.stopPropagation( ):阻止事件的冒泡传播
ev.type：当前的事件类型
【keyboardEvent】
ev.code:当前按键'keyE'
ev.key:当前案件'e'
ev.which / ev.keycode:当前案件的键盘码
【常用键值表】
}
五、事件对象的兼容问题
【IE6-8】
在IE低版本浏览器中，浏览器执行绑定的方法，并没有把事件对象传递进来，此时ev === undefined，需要基于window.event 来获取（由于是全局属性，鼠标每次操作都会把上一次操作的值替换掉）
【先手动设置】
低版本没有的属性，我们手动设置一下：按照自己有的先获取到值，然后赋值给标准对应的新属性。
六、事件的默认行为
事件本身就是天生就有的，某些事件触发，即使你没有绑定方法，也会存在一些效果，这些默认的效果就是“事件的默认行为”
【例如】
1. A标签的点击操作就存在默认行为
1.页面跳转
2.锚点定位( HASH 定位【哈希定位】)
2.input标签也有自己的默认行为
1.输入内容可以呈现到文本框中
2.输入内容的时候会把之前输入的一些信息呈现出来（并不是所有浏览器和所有情况都有）
…
3.submit按钮
1.点击按钮页面会刷新
【阻止默认行为】
【结构阻止】
【JS中阻止】
1.直接return false
2.ev.preventDefault ? ev.preventDefault( ) : ev.returnValue = false;
七、事件的传播机制
【捕获阶段 capturing_phase】
点击INNER的时候，首先会从最外层开始向内查找（找到操作的事件源），查找的目的是，构建出冒泡传播阶段需要传播的路线（查找就是按照HTML层级结构找的）
【目标阶段 at-target】
把事件源的相关操作行为触发（如果绑定了方法，则把方法执行）
【冒泡阶段 bubbling_phase】
按照捕获阶段规划的路线，自内而外，把当前事件源的祖先元素的相关事件行为依次触发（如果某一个祖先元素事件行为绑定了方法，则把方法执行，没绑定方法，行为触发了，什么都不错，继续向上传播即可）
八、关于事件对象的一些理解
1.事件对象是用来存储当前本次操作的相关信息，和操作有关，和元素无必然关联。
2.当我们基于鼠标或者键盘等操作的时候，浏览器会把本次操作的信息存储起来（标准浏览器存储到默认的内存中（自己找不到），IE低版本存储到window.event中了），存储的值是一个对象（堆内存）；操作肯定会触发元素的某个行为，也就会把绑定的方法执行，此时标准浏览器会把之前存储的对象（准确来说是堆内存地址）当做实参传递给每一个执行的方法，所以操作一次，即使再多方法中都有EV，但是存储的值都是一个（本次操作信息的对象而己）
九、onmouseover 和 mouseenter 的区别：
1. over属于滑过事件，从父元素进入到子元素，属于离开了父元素，会触发父元素的out，触发子元素的over
enter属于进入，从父元素进入到子元素，并不算离开父元素，不会触发父元素的leave，触发子元素的enter
2.enter 和 leave阻止了事件的冒泡传播，而over 和 out 还存在冒泡传播的
3.所以对于父元素嵌套子元素的这种情况，使用over会发生很多不愿意操作的事情，此时我们使用enter会更加简单，操作方便。
十、事件委托（事件代理）：
利用事件的冒泡传播机制，如果一个容器的后代元素中，很多元素的点击行为（其他事件行为也是）都要做一些处理，此时我们不需要在像以前一样一个一个获取一个个绑定，我们只需给容器的click绑定方法即可，这样不管点击的是哪一个后代元素，都会根据冒泡传播的传递机制，把容器的click行为触发，把对应的方法执行，根据事件源，我们可以知道点击的是谁，从而做不同的事情即可。
十一、事件绑定详解：
【DOM 0级事件绑定】
只允许给当前元素的某个事件行为绑定一个方法，多次绑定，后面绑定的内容会替换前面绑定的，以最后一次绑定的为主。原理：就是给元素的某一个事件私有属性赋值（浏览器会建立监听机制，当我们触发元素的某个行为，浏览器会自己把属性中赋的值去执行）
【DOM 2级事件绑定】
1.基于addEventListener 完成事件绑定，是基于“事件池机制”完成的。
2.DOM2 可以给当前元素的某一个事件绑定多个不同的方法。
【DOM 2级事件的兼容问题】
1.谷歌 VS IE高版本
在移除事件绑定的时候，如果移除操作法在正要执行的方法之前（例如，点击的时候，正要执行FN8，但是在执行FN4的时候已经移除了FN8），谷歌下是立即移除生效，IE是下一次点击生效。
2.标准 VS IE低版本
标准：addEventListener / removeEventListener
IE低：attachEvent / detachEvent
标准用的行为名称是“click”，IE低版本使用时前面要加on“onclick”
IE低版本出现的所有问题都是因为本身的事件池机制不完整而导致的
【THIS问题】
标准浏览器中，行为触发执行，方法中的THIS是当前元素本身，IE低版本中THIS指向了WINDOW
【重复问题】
标准浏览器中的事件是默认去重复的，同一个元素同一个时间行为不能出现相同的绑定方法，但是IE低版本的事件池机制没有这么完善，不能默认去重。
【顺序问题】
标准浏览器是按照向事件池中存放的顺序依次执行的，而IE低版本是乱序的，没有规律。
【事件传播的相对路径】
【DOM 0级 和 2级 事件绑定的区别】
1.机制不一样
DOM0采用的是给私有属性赋值，所以只能绑定一个方法
DOM2采用的是事件池机制，所以能绑定多个不同的方法
2.移除的操作
3.DOM2事件绑定增加了一些DOM0无法操作的事件行为，例如：DOMContentLoaded事件（当页面中的HTML结构加载完成就会触发执行）
4.两者可以共存，执行顺序根据HTML结构来判断
5.window.onload 和 $function(){} 的区别
1.$function(){} 比前者先执行，前者需要等HTML,CSS,JS加载完才执行，后者只需HTML加载完就可以执行
2.后者可以执行多次