经历一场噩梦，试图找出事件冒泡。。>
<html> <head> <script type="text/javascript"> function $(ob) { return document.getElementById(ob) } function bodyClick() { $('win_clicks').value = parseInt($('win_clicks').value) + 1; } window.addEventListener('load',function(e) { $('bl_lnk').addEventListener('click',function (e) { $('bl_lnk_clicks').value = parseInt($('bl_lnk_clicks').value) + 1; }, true); $('rd_lnk').addEventListener('click',function (e) { $('rd_lnk_clicks').value = parseInt($('rd_lnk_clicks').value) + 1; }, false); }, false); </script> </head> <body onclick="bodyClick();" style="font:16px Tahoma"> <div id="bl_lnk" style="position:absolute; width:250px; top:100px; left:50%; margin-left:-125px; padding:20px; background:#AAFFFF; border:1px solid #55AAFF; text-align:center; cursor:pointer"> I'm a link, Click me! and me! </div> <div id="rd_lnk" style="-moz-border-radius:40px; border-radius:50px; position:absolute; width:60px; height:40px; top:103px; left:50%; margin-left:77px; padding:5px; border:3px solid #FF6666; cursor:pointer"></div> <div style="position:absolute; width:250px; top:200px; left:50%; margin-left:-125px; padding:20px; background:#fff6bf; border:1px solid #FFD324;"> <table cellspacing="10"> <tr> <td>Blue Link Clicks:</td> <td><input type="text" id="bl_lnk_clicks" value="0" style="width:35px; border:0; background:transparent" /></td> </tr> <tr> <td>Red Link Clicks:</td> <td><input type="text" id="rd_lnk_clicks" value="0" style="width:35px; border:0; background:transparent" /></td> </tr> <tr> <td>Body Clicks:</td> <td><input type="text" id="win_clicks" value="0" style="width:35px; border:0; background:transparent" /></td> </tr> </table> </div> </body> </html>根据我的理解，单击红色边框内的区域应触发所有3个事件处理程序（红色，蓝色和主体），仅触发红色和主体。
我曾尝试更改addEventListener的第三个值并更改返回值，但无济于事，有什么主意吗？
遇到噩梦，试图弄清楚事件冒泡。.完整测试用例：
红色div应该在内部（结构上在HTML中，而不是视觉上），以便事件传播到蓝色div。