<!doctype html> <html lang="en"> <head> <meta charset="gb2312"> <style> #top{ width:400px; height:400px; background:red; } #middle{ width:300px; height:300px; background:blue; } #bottom{ width:200px; height:200px; background:yellow; } </style> <script> window.onload = function(){ var oTop = document.getElementById('top'); var oMiddle = document.getElementById('middle'); var oBottom = document.getElementById('bottom'); oTop.addEventListener('click',function(){ console.log('top1'); },false); oMiddle.addEventListener('click',function(){ console.log('middle1'); },false); oBottom.addEventListener('click',function(){ console.log('bottom1'); },false); oTop.addEventListener('click',function(){ console.log('top2'); },true); oMiddle.addEventListener('click',function(){ console.log('middle2'); },true); oBottom.addEventListener('click',function(){ console.log('bottom2'); },true); } </script> <title>event</title> </head> <body> <div id='top'> <div id='middle'> <div id='bottom'></div> </div> </div> </body> </html>
