首先，事件对象 event 是一个对象，包含着跟事件有关的所有信息，包括触发事件的 dom 以及 每种事件的一些特征。当dom操作触发某个事件时，会产生事件对象 event， 当事件被触发时产生，事件执行完毕时销毁。
获取鼠标在那个标签上 e.target
2.1. 事件捕获: 当时事件被触发的时候，系统会从 window 开始 依次向下遍历，遍历的过程中，遇到没有触发的相同事件便触发。
(window =>document =>html =>body =>祖先元素 =>父元素 =>目标元素)
2.2 事件触发: 直到找到触发这个事件的元素，触发元素绑定的事件方法
2.3 事件冒泡: 触发目标事件之后，然后会一层一层向上遍历，遍历的过程中，遇到没有触发的相同事件便触发。
直到返回 window 结束 这整个过程叫做事件流。
事件捕获 和 事件冒泡 同一事件流 只能有一个生效，JS中默认执行事件冒泡 (false)。
3.1 Dom 0级
写法： ele.on事件名 = function(){}
特点： js 与 html 完全分离 便于封装
缺点:同一个DOM对象 同时间只能绑定一个 同事件
也就是说 一个 dom对象 只能执行一个事件处理函数
如果给 这个事件 绑定了多个事件处理函数, 则执行最后一个事件处理函数
3.2 Dom 2级(事件监听)
写法：
ele.addEventListener("事件类型",事件处理函数,bool)
事件处理函数可以是： 匿名函数、 命名函数、 对象
bool: 布尔值 (只有true 和 false) 不写默认为 false
true： 触发 事件捕获 false：触发事件冒泡
特点:
1.DOM 2级不会与DOM 0级事件冲突 同时存在时两个都执行
2.可以绑定多个事件函数 不会起冲突
Dom2级 可以删除命名函数 事件移除 removeEventListener
注意： 事件名中没有 on， on是DOM0级的写法
4.1 鼠标事件
1. 单机事件 click
2. 双击事件 dblclick
3. 右键事件 contextmenu 默认事件：右击打开默认菜单栏
4. 移入事件 mouseenter
5. 移出事件 mouseoutmouseover
6. 移动事件 mouseenter mouseleave
7. 按下事件 mousedown
8. 释放事件 mouseup
9. 滚轮事件 mousewheel e.wheelDelta>0 向上滑 <0 向下滑
4.2 键盘事件
1. 键盘按下事件 只要按下就一直触发 keydown 获取键码： e.keyCode
2. 键盘抬起事件keyup
4.3 UI事件(窗口事件)
1. 资源加载完毕 load
2. 窗口大小发生改变 resize
3. 窗口滚动条 scroll
4. 资源加载完毕 error
4.4 表单事件
1. 获取焦点focus
2. 失去焦点blur
3. 正在输入input
4. 内容发生改变 change
1.获取鼠标坐标：
1. 在浏览器的可视窗口的坐标 --- e.clientX / e.clientY
2. 在标签内的坐标 ----- e.offsetX / e.offsetY
3. 在屏幕内的坐标 ----- e.screenX / e. screenY
4. 在文档中内的坐标 -- e.pageX / e.pageY
2. 阻止默认事件：
在给dom元素添加异步事件的时候，如果需要给子元素添加事件，有两种办法，1.直接给该子元素添加事件；
2.给该子元素的父元素添加事件，再在回调中判断事件点击的对象；
第一种办法是实现起来简单，可是如果子元素较多，这种做会对性能有较大的影响，而且如果是动态添加的dom元素，那么还需要在添加的时候再手动添加事件。操作过于麻烦；下面就看下在原生js中怎么实现事件委托（jq实现简单，在此不做演示）；
我们将点击事件添加到ul上，在点击li标签以及a标签，会将该事件冒泡到ul上面，从而触发ul的onmouseover事件，再在ul的事件中判断当前触发的对象是否是li标签。
一、原生JS事件绑定方法：1、通过HTML属性进行事件处理函数的绑定如：
1
＜a href="#" onclick="f()"＞
2、通过JavaScript对象属性进行绑定：
1
2
var a=document.getElementById("a")
a.onclick=function(){alert("你好！")}//这里也可以不用匿名的函数直接赋方法名也是可以的
通过以上这种方式进行事件函数的绑定有个缺点就是只能对一个元素的一个事件绑定一个事件处理程序，如
1
2
3
4
5
6
document.body.onclick=function(){
alert("first.")
}
document.body.onclick=function(){
alert("second.")
}
以上这种方式后面的事件处理程序会将前面的覆盖只会执行alert（"second"）,前面的将不会被执行。
3、利用所有文档元素的方法进行事件绑定：
a、addEventListener(type,handler,boolean),兼容IE8以后的所有浏览器
b、attachEvent（type,handler）适用于IE8及以下版本的浏览器
另种方法可以为JS对象的一个类型事件注册多个事件处理程序，但两者是有区别的：
（1）addEventListener中的type是不带有on的如点击事件直接用"click",而在attachEvent中的type是需要带有前缀on的；（2）前者可以接收三个参数决定事件发生的阶段是在捕获阶段还是冒泡阶段,为true则发生在捕获阶段，如果为false则发生在冒泡阶段；（3）通过addEventListener注册的事件的执行顺序与事件的注册顺序一致，即先注册的先执行，后注册的后执行。而后者执行的顺序与注册的顺序是无关的，因而在写代码时代码的执行不要依赖事件的注册顺序。（4）addEventListener对于相同的事件只会注册一次，即使多次的写了注册函数也只会成功注册一个，而后者可以将将相同的事件处理函数注册多次，并且会多次被执行。
这两种方法通常会被同时应用用于兼容不同版本的浏览器。如：
1
2
3
4
5
6
7
if(ele.addEventListener())
{
