不同的事件类型

UI事件

load

Web页面加载完成

unload

Web页面正在卸载（通常是因为请求了一个新页面）

error

浏览器遇到JavaScript错误或有不存在的资源

resize

浏览器窗口的大小发生了变化

scroll

用户使用滚动条移动了页面

键盘事件

keydown

用户第一次按下一个键

keyup

用户松开了一个键

keypress

键入了一个字符（按住这个键时会反复触发）

鼠标事件

click

用户在同一个元素上按下并松开一个按键

dbclick

连续两次按下并松开一个按键

mousedown

在一个元素上按下鼠标按键

mouseup

在一个元素上松开鼠标按键

mousemove

移动鼠标（不会发生在触摸屏上）

mouseover

将鼠标移到一个元素上（同上）

mouseout

将鼠标从一个元素上移开（同上）

焦点事件

focus/focusin

元素得到焦点

blur/focusout

元素失去焦点

表单事件

input

<input>/<textarea>元素中的值发生了变化或拥有contenteditable属性的元素中的值发生了变化

change

复选框、单选框或单选按钮的值发生了变化

submit

用户提交表单

reset

用户单击了表单上的重置按钮

cut

从一个表单域中剪切了内容

copy

从一个表单域中复制了内容

paste

向一个表单域粘贴了内容

select

在一个表单域中选中了一些文本

变动事件

DOMSubtreeModified

文档发生了变化

DOMNodeInserted

一个节点被插入为另一个节点的直接子节点

DOMNodeRemoved

一个节点被从另一个节点中移除

DOMNodeInsertedIntoDocument

一个节点被插入为另一个节点的后代

DOMNodeRemoveFromDoucument

一个节点被从其祖先节点上移除

事件如何触发JavaScript代码

1.选中需要使用脚本进行事件响应的元素节点
2.声明需要在选中节点上响应触发的事件
3.指定当事件发生时需要运行的代码

将事件绑定到元素的三种方法

1.HTML事件处理程序（不要使用）
一个元素绑定多个事件的时候可能会出错
2.传统的DOM事件处理程序
每个事件处理程序只能附加一个函数
语法：element.onevent = functionName；
3.第2级DOM监听器
它可以同时触发多个函数，但是在旧的浏览器中不被支持。
语法：element.addEventListener（‘event’，functionName[,Boolean]）；如果需要传参数，要用一个匿名函数将语句封装起来，如果旧版本浏览器不支持的话，就使用if语句分情况使用（addEventListener可以替换为attachEvent）

事件流

HTML元素都位于另一些元素中。如果移动鼠标到一个链接上，同样会把鼠标移到它的父元素上，或者点击它的父元素

就是一个元素和其祖先元素或后代元素上都有事件处理程序时，它们的执行顺序问题。addEventListener里面第三个参数如果是true表示捕获方式，false表示冒泡方式。

事件对象

属性：

target：事件的目标（与用户进行交互的最具体的元素），在IE5--IE8中等同于srcElement
type：发生的事件的类型，等同于type
cancelable：是否可以撤销事件在这个元素上的默认行为，IE5--IE8中不支持

方法：

preventDefault（）：撤销这个事件的默认行为（如果可以撤销的话），等同于returnValue
stopPropagation（）：停止事件继续冒泡或向下捕获的过程，等同于cancelBubble

事件委托

为大量的元素创建事件监听器会造成页面速度下降，事件流允许你在父元素上监听事件
额外优势：
适用于新的元素：如果向DOM树中添加了新的元素，那么不需要再向这个新元素上添加事件处理程序。
解决this关键字的限制
简化代码：易于维护

改变默认行为

事件对象有一些方法可以改变一个元素的默认行为，以及它的祖先元素如何对这个事件做出响应。
preventDefault（）有一些事件，比如点击链接或提交表单，会把用户导向另一个页面。为了阻止这种行为可以使用此方法。
stopPropagation（）处理完某个元素上的事件之后，可能需要阻止这个事件向其祖先元素继续冒泡传播。

使用事件委托 例子流程图