<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>addEventListener-捕获阶段-冒泡阶段</title>
</head>
<body>
<div id="div2">
<div id="div1">点我</div>
</div>
<script>
var div2=document.getElementById('div2');
var div1=document.getElementById('div1');
div1.addEventListener('click', function(event){console.log("A");}, true);
div2.addEventListener('click', function(event){console.log("B");});
div1.addEventListener('click', function(event){console.log("C");}, false);
div2.addEventListener('click', function(event){console.log("D");}, true);
</script>
</body>
</html>
上面代码中,当点击点我时,输出的正确结果是:DACB
true - 事件句柄在捕获阶段执行
false- false- 默认。事件句柄在冒泡阶段执行
帮助记忆,总结一句就是,从顶到底找事件,从底到顶汇报事件。