就是事件冒泡和事件捕获的demo了，很简单的
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56 |
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>.p{ width:500px; height:500px; background:#CCF;}.s{ width:300px; height:300px; background:#fff;}.min{ width:100px; height:100px; background:#063;}</style></head><body><div class="p"> <div class="s"> <div class="min"></div> </div></div><script> window.alert = function
(msg) { console.log(msg); }; var
p = document.getElementsByClassName(‘p‘)[0]; var
s = document.getElementsByClassName(‘s‘)[0]; p.addEventListener(‘click‘, function
(e) { alert( (e.target === e.currentTarget) + ‘ ‘+ e.eventPhase) alert(‘父节点捕获11‘); }, true); p.addEventListener(‘click‘, function
(e) { alert( (e.target === e.currentTarget) + ‘ ‘+ e.eventPhase) alert(‘父节点冒泡‘) }, false); s.addEventListener(‘click‘, function
(e) { alert( (e.target === e.currentTarget) + ‘ ‘+ e.eventPhase) alert(‘子节点捕获11‘); }, true); s.addEventListener(‘click‘, function
(e) { alert( (e.target === e.currentTarget) + ‘ ‘+ e.eventPhase) alert(‘子节点冒泡‘) }, false); /*e.target时指向当前目标,e.currentTarget是指向点击的this*/</script></body></html> |
原文：http://www.cnblogs.com/diligenceday/p/3568460.html