<!DOCTYPE html>
<html>
<head>
<meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39">
<title></title>
</head>
<body>
<div id="id1" style="200px; height:200px; position:absolute; top:100px; left:100px; background-color:blue; z-index:4">
<div id="id2" style="200px; height:200px; position:absolute; top:20px; left:70px; background-color:green; z-index:1"></div>
</div>
<p>addEventListener中的第三个参数是useCapture, 一个bool类型。当为false时为bubbling获取(由里向外)，true为capture方式(由外向里)。</p>
<script>
/*case1 print id2,id1*/
document.getElementById("id1").addEventListener('click', function() { console.log('id1');}, false);
document.getElementById("id2").addEventListener('click', function() { console.log('id2');}, false);
/*case2 print id2,id1*/
document.getElementById("id1").addEventListener('click', function() { console.log('id1');}, true);
document.getElementById("id2").addEventListener('click', function() { console.log('id2');}, false);
/*case3 print id1,id2*/
document.getElementById("id1").addEventListener('click', function() { console.log('id1');}, true);
document.getElementById("id2").addEventListener('click', function() { console.log('id2');}, false);
/*case4 print id1,id2*/
document.getElementById("id1").addEventListener('click', function() { console.log('id1');}, true);
document.getElementById("id2").addEventListener('click', function() { console.log('id2');}, true);
</script>
</body>
</html>