1 事件流
IE 的事件流叫做事件冒泡（event bubbling）。
如果你单击了某个按钮，他们都认为单击事件不仅仅发生在按钮上。
换句话说，在单击按钮的同时，你也单击了按钮的容器元素，甚至也单击了整个页面。
“ DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
2 事件处理程序
事件就是用户或浏览器自身执行的某种动作。诸如 click、 load 和 mouseover，都是事件的名字。
而响应某个事件的函数就叫做事件处理程序。
事件处理程序的名字以"on"开头，因此click 事件的事件处理程序就是 onclick。
方式一：
方式二：函数方式
创建的函数中有一个局部变量 event，也就是事件对象。
通过 event 变量，可以直接访问事件对象。
this 值等于事件的目标元素（下面这个例子是input元素节点）。
在 HTML 中指定事件处理程序有两个缺点。
3 DOM 0级
删除 DOM 0 级方法指定的事件处理程序。
4 DOM 2级
上面的代码为一个按钮添加了 onclick 事件处理程序，而且该事件会在冒泡阶段被触发（因为最后一个参数是 false）。
“DOM2 级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作： addEventListener()和 removeEventListener()。
所有 DOM 节点中都包含这两个方法，它们都接受 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。
使用 DOM2 级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。
通过 addEventListener()添加的事件处理程序只能使用 removeEventListener()来移除；
注意：移除时传入的参数与添加处理程序时使用的参数必须相同。
5 事件对象
在触发 DOM 上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的信息。
例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，
而键盘操作导致的事件对象中，会包含与按下的键有关的信息。
在事件处理程序内部，对象 this 始终等于 currentTarget 的值，而 target 则只包含事件的实际目标。
要阻止特定事件的默认行为，可以使用 preventDefault()方法。
只有 cancelable 属性设置为 true 的事件，才可以使用 preventDefault()来取消其默认行为。
stopPropagation()方法用于立即停止事件在 DOM 层次中的传播，即取消进一步的事件捕获或冒泡。
事件对象的 eventPhase 属性，可以用来确定事件当前正位于事件流的哪个阶段。
只有在事件处理程序执行期间，event对象才会存在；一旦事件处理程序执行完成，event 对象就会被销毁。
6 自定义DOM事件
7 事件中的this，currentTarget，target
在事件处理程序内部，对象 this 始终等于 currentTarget 的值，而 target 则只包含事件的实际目标。
如果直接将事件处理程序指定给了目标元素，则 this、 currentTarget 和 target 包含相同的值。来看下面的例子。
如果如果事件处理程序存在于按钮的父节点中（例如 document.body），那么这些值是不相同的。
事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。
事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。
事件冒泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）来组织事件的冒泡传播。