回答編集履歴
2
バブリングされたイベントはルートノードに行き着くまで親ノードへ伝播し続ける
test
CHANGED
|
@@ -1,8 +1,22 @@
|
|
|
1
|
+
### イベントバブリング
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
1
5
|
`mouseenter`, `mouseleave` は「Bubbles: no」なのでイベントバブリングは発生しませんが、`mouseover`, `mouseout` はイベントバブリングします。
|
|
6
|
+
|
|
7
|
+
バブリングされたイベントはルートノードに行き着くまで親ノードへ伝播し続けます。
|
|
8
|
+
|
|
9
|
+
ルートノードとは DOM L3 Events までは `document` でしたが、HTML Living Standard を経て現在では `window` がルートノードです。
|
|
10
|
+
|
|
11
|
+
詳細は下記リンクを参考にしてください。順を追って三回から後も読み進めれば深く理解できると思います。
|
|
2
12
|
|
|
3
13
|
|
|
4
14
|
|
|
5
15
|
- [三章第三回 イベントバブリング — JavaScript初級者から中級者になろう — uhyohyo.net](http://uhyohyo.net/javascript/3_3.html)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
### event.stopPropagation()
|
|
6
20
|
|
|
7
21
|
|
|
8
22
|
|
1
event\.stopPropagation\(\)
test
CHANGED
|
@@ -1,8 +1,16 @@
|
|
|
1
|
-
`mouseenter`, `mouseleave` は
|
|
1
|
+
`mouseenter`, `mouseleave` は「Bubbles: no」なのでイベントバブリングは発生しませんが、`mouseover`, `mouseout` はイベントバブリングします。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
- [三章第三回
|
|
5
|
+
- [三章第三回 イベントバブリング — JavaScript初級者から中級者になろう — uhyohyo.net](http://uhyohyo.net/javascript/3_3.html)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
`event.stopPropagation()` はイベントの伝播を止めます。
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
- [event.stopPropagation - Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Event/stopPropagation)
|
|
6
14
|
|
|
7
15
|
|
|
8
16
|
|