【JavaScript】Event.stopPropagation()・Event.preventDefault()

## Event.stopPropagation()  
キャプチャリング・バブリングの過程において、イベントの伝播を停止する。  
ただし、リンクの参照先への移動やチェックボックスのチェックなど、ブラウザデフォルトのイベントは停止できない。

### キャプチャリング
下記イベント処理のフェーズのうち、イベントがターゲット要素まで下りるフェーズ。  

1. キャプチャリングフェーズ  
同上

1. ターゲットフェーズ  
イベントがターゲット要素に到達したフェーズ  

1. バブリングフェーズ
ターゲット要素から祖先要素までバブリングしていくフェーズ

### バブリング  
要素上でイベントが発生した場合、イベントが発生した要素の祖先要素までイベントハンドラが実行されること。


## Event.preventDefault()
ブラウザがデフォルトで定義しているイベントを無効にする。

## サンプル
### 通常
チェックボックスをクリックすると、メッセージ表示とチェックボックスにチェックがつくイベントが実行される
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="dyJPyVG" data-user="satohsatoh" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/satohsatoh/pen/dyJPyVG">
  デフォルト</a> by SatohSatoh (<a href="https://codepen.io/satohsatoh">@satohsatoh</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### Event.stopPropagation()  
チェックボックスにチェックを入れても、メッセージが表示されなくなる
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="xxpbxzb" data-user="satohsatoh" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/satohsatoh/pen/xxpbxzb">
  stopPropagation</a> by SatohSatoh (<a href="https://codepen.io/satohsatoh">@satohsatoh</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### Event.preventDefault()
メッセージは表示されるが、チェックボックスのチェックがされなくなる
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="OrxyrX" data-user="satohsatoh" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/satohsatoh/pen/OrxyrX">
  test</a> by SatohSatoh (<a href="https://codepen.io/satohsatoh">@satohsatoh</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### Event.stopPropagation()・Event.preventDefault()
チェックもされず、メッセージも表示されない
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="PoEwodJ" data-user="satohsatoh" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/satohsatoh/pen/PoEwodJ">
  stopDefaultProgration</a> by SatohSatoh (<a href="https://codepen.io/satohsatoh">@satohsatoh</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 参考  
- [Event.stopPropagation()](https://developer.mozilla.org/ja/docs/Web/API/Event/stopPropagation)
- [Event.preventDefault()](https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault)
- [バブリング と キャプチャリング](https://ja.javascript.info/bubbling-and-capturing)
- [Qiitaで記事にCodePenが埋め込めるようになりました](https://qiita.com/Qiita/items/edae7417214c8e957f54)