element.addEventListener(event, function, useCapture)
event:指定事件名
function:指定事件触发时执行的函数。
useCapture:布尔值，指定事件在捕获或冒泡阶段执行。true:事件在捕获阶段执行，false:事件在冒泡阶段执行。
例子：
html代码：
<div id="parent"> <div id="child"> </div> </div>
css代码：
#parent{ width: 400px; height: 120px; background-color: green; margin: 50px; } #child{ width: 100px; height: 120px; background-color: orange; margin-left: 80px; cursor: pointer; }
效果图：
js代码：
var child = document.getElementById(‘child‘); var parent = document.getElementById(‘parent‘); parent.addEventListener(‘click‘,function(){ console.log(1); },true); parent.addEventListener(‘click‘,function(){ console.log(2); },false); child.addEventListener(‘click‘,function(){ console.log(3); },true); child.addEventListener(‘click‘,function(){ console.log(4); },true);
点击child元素后，打印结果为：1 3 4 2
分析：点击事件后，事件从元素向目标元素传递（捕获阶段），然后到目标元素（目标阶段），最后从目标元素向根元素传递。在捕获阶段中，输出1，在目标阶段输出3，4，在冒泡阶段输出2。
原文：http://www.cnblogs.com/fe-huahai/p/5727551.html