事件冒泡
事件冒泡是由IE开发团队提出来的，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。
当用户点击了<div>元素，click事件将按照<div>—><body>—><html>—>document的顺序进行传播。若在<div>和<body>上都定义了click事件
点击<div>，将先输出“div”，再输出“body”。
IE9，chrome，Firefox，Opera，Safari都支持事件冒泡，并将事件冒泡到window对象。
事件捕获
事件捕获是由Netscape Communicator团队提出来的，是先由最上一级的节点先接收事件，然后向下传播到具体的节点。当用户点击了<div>元素，采用事件捕获，则click事件将按照document—><html>—><body>—><div>的顺序进行传播。
若在<div>和<body>上都定义了click事件，如下：
点击<div>，将先输出“body”，再输出“div”。
IE9，chrome，Firefox，Opera，Safari都支持事件捕获，但是IE8和IE8以下的版本只支持事件冒泡。尽管DOM2规范要求事件应该从document对象开始传播，但是现在的浏览器实现都是从window对象开始捕获事件。
DOM事件流
"DOM2级事件”规定的事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后阶段是冒泡阶段。以上面的HTML页面为例，单击<div>元素将按照下图触发事件：
若在<div>和<body>上都定义了click事件，如下：
点击<div>，将先输出“event catch”，再输出“div”，最后输出“event bubble”。
事件处理程序
事件是用户或浏览器自身执行的某种动作，而响应某个事件的函数叫做事件处理程序。HTML事件处理程序、DOM0级事件处理程序和IE事件处理程序均以“on”开头，DOM2级事件处理程序不需要加“on”。
HTML事件处理程序
DOM0级事件处理程序
DOM2级事件处理程序
IE9，chrome，Firefox，Opera，Safari均实现了DOM2级事件处理程序，绑定事件方法addEventListener()接收三个参数：事件名称，事件处理函数和一个布尔值。布尔值为true，则表示在捕获阶段调用事件处理程序；如果为false，则表示在冒泡阶段调用事件处理程序。addEventListener允许在同一个元素上添加多个事件处理程序，如下所示：
先输出“event bubble”，后输出“event catch”，说明addEvenListener绑定的处理程序执行顺序和绑定顺序相同。
通过DOM2级事件处理程序指定的方法，this也引用当前元素，如下：
输出“myDiv”。
删除DOM2级事件处理程序，采用removeEventListener()，删除时传入的参数必须和绑定时传入的参数相同，不能传入匿名函数。如下所示：
IE事件处理程序
IE8和IE8以下的版本不支持addEventListener()，而是采用attachEvent()来实现事件绑定。目前只有IE和Opera支持attachEvent()。IE9支持addEventListener()，同时也兼容IE8的attachEvent()方法，但是IE9和IE8对attachEvent()的实现有点不同。如下所示：
IE9和IE10先输出“1”，再输出“2”，而IE8和IE7先输出“2”，再输出“1”。
删除IE事件处理程序，采用detachEvent()，删除时传入的参数必须和绑定时传入的参数相同，不能传入匿名函数。如下所示：
总结：attachEvent()采用冒泡方式，而addEventListener()可以采用冒泡或事件捕获方式。
输出顺序：body:event catch—>parent:event catch—>child—>parent:event bubble—>body:event bubble
W3C
任何发生在w3c事件模型中的事件，首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段。
对于正常的web开发，可以选择是在捕获阶段还是冒泡阶段绑定事件处理函数，这是通过addEventListener()方法实现的，如果这个函数的useCapture参数是true，则在捕获阶段绑定函数，反之false，在冒泡阶段绑定函数。
|
element.addEventListener(event, function, useCapture) |
阻止冒泡
在正常的开发过程中，如果想要阻止事件的传播，通过一个方法实现。
在微软的模型中，你必须设置事件的cancelBubble的属性为true
|
window.event.cancelBubble = true |
在w3c模型中你必须调用事件的stopPropagation()方法
|
e.stopPropagation() |
通过调用这些方法会阻止所有冒泡向外传播。跨浏览器解决方案：
|
function doSomething(e) { if (!e) { var e = window.event; e.cancelBubble = true; } if (e.stopPropagation) { e.stopPropagation(); } } |
