MicroSoft的设计是当事件在元素上触发时，该事件将接着在该节点的父节点触发，以此类推，事件一直沿着DOM树向上传播，直到到达顶层对象document元素。这种自底向上的事件传播方式称为“事件冒泡”。
在基于W3C标准的浏览器中，事件传播首先是从最外层的元素传播到最内层的目标元素（这称为事件的“捕获”阶段），然后事件的传播讲反转方向，从最内层的元素在冒泡到最外层的元素。
回顾addEventListener()方法和removeEventListener()方法，
targetElemen.addEventListener(type,listener,useCapture);
targetElemen.removeEventListener(type,listener,useCapture);
参数useCapture=false，则将事件传播的冒泡阶段绑定事件，否则use=true，则将事件传播的捕获阶段绑定事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BodyTest</title>
</head>
<body>
<div id ="div1">
<div id="div2">
I am inside a div.
</div>
</div>
<script type="text/javascript">
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.addEventListener("click",eventHandle1,true);
div1.addEventListener("click",eventHandle3,false);
div2.addEventListener("click",eventHandle4,true);
div2.addEventListener("click",eventHandle2,false);
function eventHandle1(){alert("1");}
function eventHandle2(){alert("2");}
function eventHandle3(){alert("3");}
function eventHandle4(){alert("4");}
</script>
</body>
</html>
输出顺序：1423