<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ width:500px; height: 500px; background-color: aqua; } #div2{ width:300px; height: 300px; background-color:darkcyan; } #div3{ width:100px; height: 100px; background-color:darksalmon; } </style> <script> window.onload = function(){ var div1 = document.getElementById('div1'); var div2 = document.getElementById('div2'); var div3 = document.getElementById('div3'); div1.attachEvent('onclick',function(){ alert('div1'); });//捕獲 div3.attachEvent('onclick',function(){ alert('div3'); });//目標函數 div1.attachEvent('onclick',function(){ alert('div1'); });//冒泡 } </script> </head> <body> <div id="div1"> <div id="div2"> <div id="div3"> </div> </div> </div> </body> </html>
這幾天準備整理一些兼容性問題：
直接上代碼，上面是IE瀏覽器上面的冒泡事件。
當我點擊div3的時候，首先彈出alert（‘div3'）;後面接着彈出2個div1；
當我點擊div1的時候，直接彈出2個div1；
雖然我沒有給div2綁定事件，當我點擊div2的時候，也彈出了2個div1;
以上事例表明：ie瀏覽器只有冒泡事件，沒有捕獲。
