事件
事件三要素： 事件源 + 事件名称 + 事件处理程序
- 事件源 : 谁触发这个事件 (按钮 btn)
- 事件名称 : 触发了什么事件 (点击click事件)
- 事件处理程序 : 事件触发后要执行的代码(函数形式)----可以是有名字的函数，要不要加小括号？不加
鼠标事件
| 事件 | 描述 |
|---|---|
| click | 左键单击 |
| contextmenu | 右键单击 |
| dblclick | 双击 |
| mousedown | 左键按下 |
| mouseup | 左键弹起 |
| mouseover | 鼠标放上去（在子元素上也会触发） |
| mouseout | 鼠标离开 |
| mouseenter | 鼠标放上去 |
| mouseleave | 鼠标离开 |
| mousemove | 鼠标移动事件 |
| mousewheel | 鼠标滚轮事件 |
注意：鼠标滚轮事件有兼容性问题，在IE、Chrom中是mousewheel，在FireFox中是DOMMouseScroll，且在FirFox中不能使用on来绑定。在IE和Chrom中向上滚动，事件对象中的wheelDelta是120，向下滚动是-120，在FirFox中向上滚动，事件对象中的e.detail是3，向下滚动是-3。
浏览器事件
| 事件 | 描述 |
|---|---|
| load | 加载 |
| scroll | 滚动 |
| resize | 大小改变 |
键盘事件
| 事件 | 描述 |
|---|---|
| keydown | 按下 |
| keyup | 弹起 |
| keypress | 敲打 |
键盘事件除了用window可以触发之外，还可以使用document，或者表单元素。总之是可以选中的元素。例如div就不行。
表单事件
| 事件 | 描述 |
|---|---|
| submit | 提交表单 |
| focus | 获取焦点 |
| blur | 失去焦点 |
| change | 内容改变并失去焦点 |
| input | input的value值改变 |
使用说明：input事件在低版本的IE中不兼容，使用onpropertychange代替。
事件流
每个事件发生的时候，都会有一个触发并执行的过程，也就是事件的传播过程，我们称之为事件流。
简单来说，事件流就是事件从发生到执行结束的流程。
事件流包含3个阶段：捕获阶段、目标阶段、冒泡阶段
事件捕获阶段：事件开始由顶层元素触发，然后逐级向下传播，直到目标元素，依次执行其身上绑定的事件。
事件目标阶段(处理阶段)：触发当前自身的事件。
事件冒泡阶段：事件由目标元素先接收，然后逐级向上传播，达到最顶层元素，依次执行其身上绑定的事件。
事件执行的流程是先捕获阶段——》再目标元素阶段——》最后冒泡阶段。
目标元素的事件是在目标阶段执行，其他事件会在冒泡阶段执行。每个事件只会执行一次，也就是说如果在冒泡阶段执行了事件，就不会在捕获阶段执行。
事件的绑定方式
使用on加事件类型绑定事件：
使用on来绑定事件有弊端：同一个事件只能给一个元素绑定一次。
解决方案：
使用addEventListener()
语法：
obj.addEventListener(type,handle,false);
# 参数1：给元素绑定的事件类型，如：click，mouseover。。。
# 参数2：处理事件的函数
# 参数3：是否在冒泡阶段执行，true在捕获阶段执行，false在冒泡阶段执行
使用说明：这个方法在IE低版本浏览器中不兼容。在IE低版本浏览器中使用attachEvent()来代替。
语法：
obj.attachEvent('on' + type,handle);
# type表示事件类型
# handle表示处理事件的函数
使用说明：这种写法，有个特点：顺序注册事件，执行的时候是倒叙执行。
事件的解绑
1.绑定事件的本质是在干什么？将事件类型赋值为一个函数，存到内存中
2.为什么要解绑？有些事件在执行结束后不要了
3.怎么解绑？
根据绑定方式不同，解绑方式也是不同的：
1.如果使用标签.on类型绑定的，给标签.on类型 = null
2.如果使用事件侦听器绑定的，就使用 标签.removeEventListener(事件类型, 对应函数)
如果绑定的函数是匿名函数，这个事件是解绑不了的
