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 >
95 <div >
96 <div ></div>
97 </div>
98 </div>
99 </body>
100 </html>
