teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

シンプルなサンプルコードを追記

2016/12/21 11:54

投稿

think49
think49

スコア18194

answer CHANGED
@@ -1,5 +1,48 @@
1
+ ### 質問文を編集したコード
2
+
1
3
  バブリングフェーズではきちんと親要素に伝播していますよ。
2
4
 
3
5
  - [バブリング/キャプチャリングフェーズ - JSFiddle](https://jsfiddle.net/toj4yqar/)
4
6
 
7
+ ### シンプルなサンプルコード
8
+
9
+ 出来るだけシンプルなコードを組むことをお勧めします。
10
+
11
+ - [イベントバブリング - JSFiddle](https://jsfiddle.net/toj4yqar/1/)
12
+
13
+ ```HTML
14
+ <style>
15
+ div, p {
16
+ border: solid 1px #99f;
17
+ background-color: #eef;
18
+ padding: 1em;
19
+ margin: 1em;
20
+ }
21
+ </style>
22
+ </head>
23
+ <body>
24
+ <div id="superParent">
25
+ superParent
26
+ <div id="parent">parent
27
+ <p id="child">child</p>
28
+ </div>
29
+ </div>
30
+ <script>
31
+ 'use strict';
32
+ function handleClick (event) {
33
+ console.log(event.eventPhase, event.type, event.target, event.currentTarget);
34
+ }
35
+
36
+ var elements = [document.getElementById('child'), document.getElementById('parent'), document.getElementById('superParent'), document.body, document];
37
+
38
+ for (var i = 0, l = elements.length; i < l; ++i) {
39
+ elements[i].addEventListener('click', handleClick, false);
40
+ }
41
+ </script>
42
+ ```
43
+
44
+ 以前、紹介した uhyohyo.net もシンプルなコードです。
45
+
46
+ - [三章第三回 イベントバブリング — JavaScript初級者から中級者になろう — uhyohyo.net](http://uhyohyo.net/javascript/3_3.html)
47
+
5
48
  Re: aaaaaaaa さん