1 <!DOCTYPE html> 2 <html lang="en" xmlns="http://www.w3.org/1999/html"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #yeye{ 8 500px; 9 height: 500px; 10 background-color: #f24b4b; 11 } 12 #baba{ 13 400px; 14 height: 400px; 15 background-color: #44c28d; 16 } 17 #erzi{ 18 300px; 19 height: 300px; 20 background-color: #6e8cd5; 21 } 22 </style> 23 <script> 24 window.onload = function () { 25 26 /** 27 * 28 * 29 * 事件捕获： 30 * 浏览器就好像盲人一样，要找某个元素，其实挨个挨个问的方式去找 31 * 这个过程我们叫事件的捕获过程. 32 * // 从外到里，直到找到目标 33 * 34 * 事件冒泡： 35 * 找到到目标后，其实还有一个回馈的过程，逐级往上传播 36 * 这个过程我们叫事件的冒泡过程. 37 * // 从里到外，直到传到window 38 * 39 * 注意： 40 * 我们一般都是事件冒泡的方式注册事件的 41 * 42 * 43 * 事件的三个阶段 44 45 1. 捕获阶段 46 2. 当前目标阶段 47 3. 冒泡阶段 48 事件对象.eventPhase属性可以查看事件触发时所处的阶段 49 50 * 51 * */ 52 53 var yeye = document.getElementById("yeye"); 54 var baba = document.getElementById("baba"); 55 var erzi = document.getElementById("erzi"); 56 57 erzi.onclick = function (event) { 58 event = event || window.event; 59 if(event.stopPropagation) { 60 // ie9+ 其余全支持 61 event.stopPropagation(); 62 }else{ 63 // 全部兼容 兼容ie8 64 event.cancelBubble = true; 65 } 66 console.log("儿子", event); 67 } 68 baba.onclick = function (event) { 69 event = event || window.event; 70 if(event.stopPropagation) { 71 // ie9+ 其余全支持 72 event.stopPropagation(); 73 }else{ 74 // 全部兼容 兼容ie的 75 event.cancelBubble = true; 76 } 77 console.log("爸爸", event); 78 } 79 yeye.onclick = function (event) { 80 event = event || window.event; 81 if(event.stopPropagation) { 82 // ie9+ 其余全支持 83 event.stopPropagation(); 84 }else{ 85 // 全部兼容 86 event.cancelBubble = true; 87 } 88 console.log("爷爷", event); 89 } 90 } 91 </script> 92 </head> 93 <body> 94 <div id="yeye"> 95 <div id="baba"> 96 <div id="erzi"></div> 97 </div> 98 </div> 99 </body> 100 </html>