<body> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div> </body> <script> window.onload = function() { var oDiv1 = document.getElementById(‘div1‘); var oDiv2 = document.getElementById(‘div2‘); var oDiv3 = document.getElementById(‘div3‘); function fn1() { alert( this.id ); } /*oDiv1.onclick = fn1; oDiv2.onclick = fn1; oDiv3.onclick = fn1;*/ //false = 冒泡（出去） true = 捕获（进来） //告诉div1，如果有一个出去的事件触发了你，你就去执行fn1这个函数 /*oDiv1.addEventListener(‘click‘, fn1, false); oDiv2.addEventListener(‘click‘, fn1, false); oDiv3.addEventListener(‘click‘, fn1, false);*/ //告诉div1，如果有一个进来的事件触发了你，你就去执行fn1这个函数 /*oDiv1.addEventListener(‘click‘, fn1, true); oDiv2.addEventListener(‘click‘, fn1, true); oDiv3.addEventListener(‘click‘, fn1, true);*/ oDiv1.addEventListener(‘click‘, function() { alert(1); }, false); oDiv1.addEventListener(‘click‘, function() { alert(3); }, true); oDiv3.addEventListener(‘click‘, function() { alert(2); }, false); //3 2 1 } </script>
原文：http://www.cnblogs.com/chiangyibo/p/6684562.html