回答編集履歴
2
追記＆訂正
test
CHANGED
|
@@ -4,7 +4,20 @@
|
|
|
4
4
|
|
|
5
5
|
↓↓↓
|
|
6
6
|
|
|
7
|
-
JavaScript で addEventListener を使ってリスナをアタッチする際、イベントが発生する要素に直接リスナをアタッチした方が良いのか、その要素の親の要素（例えば document）にアタッチしてキャプチャリングとかバブリングで
|
|
7
|
+
JavaScript で addEventListener を使ってリスナをアタッチする際、イベントが発生する要素に直接リスナをアタッチした方が良いのか、その要素の親の要素（例えば document）にアタッチしてキャプチャリングとかバブリングで捕捉した方が良いのか？
|
|
8
8
|
|
|
9
9
|
それはもう適材適所としか言えません。
|
|
10
10
|
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
**【追記】**
|
|
14
|
+
|
|
15
|
+
後者（親で捕捉）とする場合、伝播は 3 つのフェーズに分かれており、Capturing Phase（捕捉フェーズ）⇒ Target Phase（対象フェーズ）⇒ Bubbling Phase（浮上フェーズ）という順番になります。それぞれのフェーズの説明は以下の通りです。
|
|
16
|
+
|
|
17
|
+
(1) Capturing Phase では、window ⇒ document ⇒ その中の親 ⇒ 子 ⇒ 孫 ⇒ ひ孫 ・・・といった具合に、親子関係を親側から順にたぐって、イベントが起きたオブジェクトの親まで（「親まで」という点に注意）の各オブジェクトにイベントが送信されていきます。
|
|
18
|
+
|
|
19
|
+
(2) Target Phase では、イベントの原因となったオブジェクトにイベントが送信されます。
|
|
20
|
+
|
|
21
|
+
(3) Bubbling Phase では、イベントを発生させたオブジェクトの親から（「親から」という点に注意）順に浮上していき、window に達するまで各オブジェクトに順にイベントが送信されていきます。
|
|
22
|
+
|
|
23
|
+
・・・と言うことで少々注意が必要と思います。
|
1
追加
test
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
↓↓↓
|
|
6
6
|
|
|
7
|
-
JavaScript で addEventListener を使ってリスナをアタッチする際、イベントが発生する要素に直接リスナをアタッチした方が良いのか、その要素の親の要素（例えば document）にアタッチした方が良いのか？
|
|
7
|
+
JavaScript で addEventListener を使ってリスナをアタッチする際、イベントが発生する要素に直接リスナをアタッチした方が良いのか、その要素の親の要素（例えば document）にアタッチしてキャプチャリングとかバブリングで補足した方が良いのか？
|
|
8
8
|
|
|
9
9
|
それはもう適材適所としか言えません。
|
|
10
10
|
|