js中addEventListener中第3个参数 更多的情况研究

借用其他兄弟的成果扩展一下

<div id="id1" style="width:200px; height:200px; position:absolute; top:100px; left:100px; background-color:blue; z-index:4;border:1px solid #f00;">d1      <div id="id2" style="width:200px; height:200px; position:absolute; top:20px; left:70px; background-color:green; z-index:1;border:1px solid #f00;">d2         <div id="id3" style="width:200px; height:200px; position:absolute; top:20px; left:70px; background-color:red; z-index:1;border:1px solid #f00;">d3         </div>    </div>  </div>  

这里采用了三个监听：

document.getElementById('id1').addEventListener('click', function() { console.log('id1==false');}, false);document.getElementById('id2').addEventListener('click', function() { console.log('id2==false');}, false);document.getElementById('id3').addEventListener('click', function() { console.log('id3==true');}, true);

关于第三个参数的设置以及最后冒泡的顺序问题，大致规律可以这么看，如果有更多的监听，那么首先将第三个参数为true的所有监听分为一组放在冒泡的前部，为false的放在后部，即，为true的先响应事件，为FALSE的后响应事件，为true的部分，按照从最外层到最里层的顺序响应，为false的部分按照从里层到外层的顺序响应，这就得到最后的响应顺序，如上例最后的结果是：d3,d2,d1