总结： 当同一个Dom节点既注册了捕获阶段事件，又注册了冒泡阶段事件，会先执行捕获阶段事件后，后执行冒泡阶段事件。
事件捕获： 是指自上而下的顺序，从document开始执行事件到触发事件的Dom节点。
（初期：Netscape（网景）只使用事件捕获）
事件冒泡： 是指自下而上的顺序，从触发事件的Dom节点开始执行事件到document。
（初期：Internet Explorer只使用事件冒泡）
事件委托： 是指利用事件冒泡的机制，在触发事件的Dom节点的上层节点（如：父级节点）进行事件绑定委托上层节点进行事件处理，可以达到减少同一类型节点单个绑定事件时内存空间占用，并使当前类型节点可以动态添加减少不用额外添加或减少绑定事件。
EventTarget.addEventListener(type,listener,useCapture)
将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。
IE9之前使用 attachEvent 绑定事件兼容
注：第三个参数useCapture可以是一个options具体可以查看MDN
type： 监听事件类型字符串。（如： click， 注：不需要写 "on"）
listener： 监听事件类型触发时执行函数。
useCapture：表示监听事件类型触发条件，即在什么阶段触发。默认false，在冒泡阶段触发，当设置为true时，执行函数只在捕获阶段触发。
event.stopPropagation：阻止捕获和冒泡阶段当前事件进一步的传播。不能防止默认任何行为发生。
event.preventDefault： 如果此事件没有被显示处理，默认的动作也不执行，事件继续传播。即阻止事件默认行为，不能防止显示处理任何行为发生。
借用网上实例并修改部分，忘记是那个网址，见谅
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
#outer{
text-align: center;
400px;
height: 400px;
background-color: #ccc;
margin: 0 auto;
}
#middle{
250px;
height: 250px;
background-color: #f00;
margin: 0 auto;
}
#inner{
100px;
height: 100px;
background-color: #0f0;
margin: 0 auto;
border-rad
}
</style>
</head>
<body>
<div id='outer'>
<span>outer</span>
<div id='middle'>
<span>middle</span>
<div id='inner'>
<span>inner</span>
</div>
</div>
</div>
<script>
function $(element){
return document.getElementById(element);
}
function on(element,event_name,handler,use_capture){
console.log('只执行一次判断')
if(addEventListener){
on = function(element,event_name,handler,use_capture){
console.log('直接执行addEventListener')
$(element).addEventListener(event_name,handler,use_capture);
}
}else{
on = function(element,event_name,handler,use_capture){
console.log('直接执行addEventListener')
$(element).attachEvent('on'+event_name,handler);
}
}
}
on("outer","click",o_click_c,true);
on("middle","click",m_click_c,true);
on("inner","click",i_click_c,true);
on("outer","click",o_click_b,false);
on("middle","click",m_click_b,false);
on("inner","click",i_click_b,false);
function o_click_c(){
console.log("outer_捕获")
}
function m_click_c(e){
e.preventDefault()
console.log("middle_捕获")
}
function i_click_c(){
console.log("inner_捕获")
}
function o_click_b(){
console.log("outer_冒泡")
}
function m_click_b(e){
e.stopPropagation()
console.log("middle_冒泡")
}
function i_click_b(){
console.log("inner_冒泡")
}
</script>
</body>
</html>
// 输出
// a.html:63 outer_捕获
// a.html:67 middle_捕获
// a.html:70 inner_捕获
// a.html:80 inner_冒泡
// a.html:77 middle_冒泡